teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問wp_list_categories()で取得したカテゴリリストを開閉式にすることはできないか。

編集履歴

質問編集履歴

8

変更

2017/05/15 04:48

投稿

destrudo
destrudo

スコア143

test CHANGED
File without changes
test CHANGED
@@ -147,3 +147,27 @@
147
147
  </html>
148
148
 
149
149
  ```
150
+
151
+ ```ここに言語を入力
152
+
153
+ $(function(){
154
+
155
+ //カテゴリの折り畳み
156
+
157
+ $(".children").hide();
158
+
159
+ $(".cat-item li").hover(function() {
160
+
161
+ $(this).children('ul').slideDown(400);
162
+
163
+ }, function() {
164
+
165
+ $(this).children('ul').hide(400);
166
+
167
+ });
168
+
169
+ });
170
+
171
+ ```
172
+
173
+ コメントに沿って、指摘を直してみたのですが、これでもダメでした。

7

変更

2017/05/15 04:48

投稿

destrudo
destrudo

スコア143

test CHANGED
File without changes
test CHANGED
@@ -90,6 +90,8 @@
90
90
 
91
91
  【追記】一番初めの転写するのを間違えたコードです。
92
92
 
93
+ [このサイト](http://nara-nissin.com/2014/01/31/36037803/)を参考にしました。
94
+
93
95
  ```ここに言語を入力
94
96
 
95
97
  <!DOCTYPE html>

6

追記

2017/05/15 04:44

投稿

destrudo
destrudo

スコア143

test CHANGED
File without changes
test CHANGED
@@ -87,3 +87,61 @@
87
87
  </ul>
88
88
 
89
89
  ```
90
+
91
+ 【追記】一番初めの転写するのを間違えたコードです。
92
+
93
+ ```ここに言語を入力
94
+
95
+ <!DOCTYPE html>
96
+
97
+ <html>
98
+
99
+ <head>
100
+
101
+ <meta charset="utf-8">
102
+
103
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
104
+
105
+ </head>
106
+
107
+ <body>
108
+
109
+ <div class="wrap">
110
+
111
+ <ul>
112
+
113
+ <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'tag_name', 'show_count' => 0 ) ); ?>
114
+
115
+ <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'category_name', 'show_count' => 0 ) ); ?>
116
+
117
+ </ul>
118
+
119
+ <script>
120
+
121
+ $(function(){
122
+
123
+ //カテゴリの折り畳み
124
+
125
+ $(".tree-menu .children").hide();
126
+
127
+ $(".tree-menu li").hover(function() {
128
+
129
+ $(this).children('ul').slideDown(400);
130
+
131
+ }, function() {
132
+
133
+ $(this).children('ul').hide(400);
134
+
135
+ });
136
+
137
+ });
138
+
139
+ </script>
140
+
141
+ </div>
142
+
143
+ </body>
144
+
145
+ </html>
146
+
147
+ ```

5

追加

2017/05/15 04:39

投稿

destrudo
destrudo

スコア143

test CHANGED
File without changes
test CHANGED
@@ -55,3 +55,35 @@
55
55
  【追記】
56
56
 
57
57
  すみません。別のサイトのコードを試していました。このサイトを元に作ったコードはこれですが、これも動かないです。
58
+
59
+
60
+
61
+ 【追記】htmlの構造です。
62
+
63
+ ```ここに言語を入力
64
+
65
+ <ul>
66
+
67
+ <li class="cat-item cat-item-26"><a href=">親カテゴリー</a>
68
+
69
+ <ul class='children'>
70
+
71
+ <li class="cat-item cat-item-20"><a href="example" >子カテゴリー１</a>
72
+
73
+ </li>
74
+
75
+ <li class="cat-item cat-item-18"><a href="example" >子カテゴリー２</a>
76
+
77
+ </li>
78
+
79
+ <li class="cat-item cat-item-21"><a href="example" >子カテゴリー３</a>
80
+
81
+ </li>
82
+
83
+ </ul>
84
+
85
+ </li>
86
+
87
+ </ul>
88
+
89
+ ```

4

変更

2017/05/15 04:36

投稿

destrudo
destrudo

スコア143

test CHANGED
File without changes
test CHANGED
@@ -16,47 +16,27 @@
16
16
 
17
17
  ```ここに言語を入力
18
18
 
19
- <!DOCTYPE html>
19
+ div class="wrap">
20
20
 
21
- <html>
21
+ <ul id="CatList">
22
22
 
23
- <head>
24
-
25
- <meta charset="utf-8">
26
-
27
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
28
-
29
- </head>
30
-
31
- <body>
32
-
33
-
34
-
35
- <div class="wrap">
36
-
37
- <ul>
38
-
39
- <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'category_name', 'show_count' => 0 ) ); ?>
23
+ <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'tag', 'show_count' => 0 ) ); ?>
40
24
 
41
25
  </ul>
42
26
 
43
27
  <script>
44
28
 
45
- $(function(){
46
29
 
47
- //カテゴリの折り畳み
48
30
 
49
- $(".tree-menu .children").hide();
50
31
 
51
- $(".tree-menu li").hover(function() {
52
32
 
53
- $(this).children('ul').slideDown(400);
54
33
 
55
- }, function() {
56
34
 
57
- $(this).children('ul').hide(400);
35
+ $("#CatList li").has('ul').prepend('<a class="Open"> </a>').children('ul').css({"display":"none"});
58
36
 
59
- });
37
+ $('.Open').click(function(){
38
+
39
+ $(this).toggleClass('On').stop().nextAll('ul').slideToggle();
60
40
 
61
41
  });
62
42
 
@@ -70,72 +50,8 @@
70
50
 
71
51
  </html>
72
52
 
73
-
74
-
75
53
  ```
76
-
77
- こんなコードも継ぎはぎしてみましたが、特に変わらずでした。
78
-
79
-
80
54
 
81
55
  【追記】
82
56
 
83
- 要素なかったですね。
84
-
85
- ```ここに言語を入力
86
-
87
- <ul>
88
-
89
- <li class="cat-item cat-item-26"><a href=">親カテゴリー</a>
90
-
91
- <ul class='children'>
92
-
93
- <li class="cat-item cat-item-20"><a href="example" >子カテゴリー１</a>
94
-
95
- </li>
96
-
97
- <li class="cat-item cat-item-18"><a href="example" >子カテゴリー２</a>
98
-
99
- </li>
100
-
101
- <li class="cat-item cat-item-21"><a href="example" >子カテゴリー３</a>
102
-
103
- </li>
104
-
105
- </ul>
106
-
107
- </li>
108
-
109
- </ul>
110
-
111
- ```
112
-
113
- 自分のそのページのソースコードをみるとこういう構造になっているのですが、どう指定したらいいでしょうか。
57
+ すみません。別のサイトのコードを試していました。このサイトを元に作ったコードはこれですが、これも動かないです。
114
-
115
-
116
-
117
- 【追記２】
118
-
119
- ```ここに言語を入力
120
-
121
- $(function(){
122
-
123
- //カテゴリの折り畳み
124
-
125
- $(".cat-item .cat-item-26 .children").hide();
126
-
127
- $(".cat-item .cat-item-26 li").hover(function() {
128
-
129
- $(this).children('ul').slideDown(400);
130
-
131
- }, function() {
132
-
133
- $(this).children('ul').hide(400);
134
-
135
- });
136
-
137
- });
138
-
139
- ```
140
-
141
- classのセレクタが２つあったので、スペースであけてみましたが、書き方違いますか。

3

追記

2017/05/15 03:39

投稿

destrudo
destrudo

スコア143

test CHANGED
File without changes
test CHANGED
@@ -111,3 +111,31 @@
111
111
  ```
112
112
 
113
113
  自分のそのページのソースコードをみるとこういう構造になっているのですが、どう指定したらいいでしょうか。
114
+
115
+
116
+
117
+ 【追記２】
118
+
119
+ ```ここに言語を入力
120
+
121
+ $(function(){
122
+
123
+ //カテゴリの折り畳み
124
+
125
+ $(".cat-item .cat-item-26 .children").hide();
126
+
127
+ $(".cat-item .cat-item-26 li").hover(function() {
128
+
129
+ $(this).children('ul').slideDown(400);
130
+
131
+ }, function() {
132
+
133
+ $(this).children('ul').hide(400);
134
+
135
+ });
136
+
137
+ });
138
+
139
+ ```
140
+
141
+ classのセレクタが２つあったので、スペースであけてみましたが、書き方違いますか。

2

追記

2017/05/15 03:17

投稿

destrudo
destrudo

スコア143

test CHANGED
File without changes
test CHANGED
@@ -75,3 +75,39 @@
75
75
  ```
76
76
 
77
77
  こんなコードも継ぎはぎしてみましたが、特に変わらずでした。
78
+
79
+
80
+
81
+ 【追記】
82
+
83
+ 要素なかったですね。
84
+
85
+ ```ここに言語を入力
86
+
87
+ <ul>
88
+
89
+ <li class="cat-item cat-item-26"><a href=">親カテゴリー</a>
90
+
91
+ <ul class='children'>
92
+
93
+ <li class="cat-item cat-item-20"><a href="example" >子カテゴリー１</a>
94
+
95
+ </li>
96
+
97
+ <li class="cat-item cat-item-18"><a href="example" >子カテゴリー２</a>
98
+
99
+ </li>
100
+
101
+ <li class="cat-item cat-item-21"><a href="example" >子カテゴリー３</a>
102
+
103
+ </li>
104
+
105
+ </ul>
106
+
107
+ </li>
108
+
109
+ </ul>
110
+
111
+ ```
112
+
113
+ 自分のそのページのソースコードをみるとこういう構造になっているのですが、どう指定したらいいでしょうか。

1

変更

2017/05/15 03:15

投稿

destrudo
destrudo

スコア143

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  <ul>
38
38
 
39
- <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'tag_name', 'show_count' => 0 ) ); ?>
39
+ <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'category_name', 'show_count' => 0 ) ); ?>
40
40
 
41
41
  </ul>
42
42