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

編集履歴

質問編集履歴

8

変更

2017/05/15 04:48

投稿

destrudo
destrudo

スコア143

title CHANGED
File without changes
body CHANGED
@@ -72,4 +72,16 @@
72
72
  </div>
73
73
  </body>
74
74
  </html>
75
- ```
75
+ ```
76
+ ```ここに言語を入力
77
+ $(function(){
78
+ //カテゴリの折り畳み
79
+ $(".children").hide();
80
+ $(".cat-item li").hover(function() {
81
+ $(this).children('ul').slideDown(400);
82
+ }, function() {
83
+ $(this).children('ul').hide(400);
84
+ });
85
+ });
86
+ ```
87
+ コメントに沿って、指摘を直してみたのですが、これでもダメでした。

7

変更

2017/05/15 04:48

投稿

destrudo
destrudo

スコア143

title CHANGED
File without changes
body CHANGED
@@ -44,6 +44,7 @@
44
44
  </ul>
45
45
  ```
46
46
  【追記】一番初めの転写するのを間違えたコードです。
47
+ [このサイト](http://nara-nissin.com/2014/01/31/36037803/)を参考にしました。
47
48
  ```ここに言語を入力
48
49
  <!DOCTYPE html>
49
50
  <html>

6

追記

2017/05/15 04:44

投稿

destrudo
destrudo

スコア143

title CHANGED
File without changes
body CHANGED
@@ -42,4 +42,33 @@
42
42
  </ul>
43
43
  </li>
44
44
  </ul>
45
+ ```
46
+ 【追記】一番初めの転写するのを間違えたコードです。
47
+ ```ここに言語を入力
48
+ <!DOCTYPE html>
49
+ <html>
50
+ <head>
51
+ <meta charset="utf-8">
52
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
53
+ </head>
54
+ <body>
55
+ <div class="wrap">
56
+ <ul>
57
+ <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'tag_name', 'show_count' => 0 ) ); ?>
58
+ <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'category_name', 'show_count' => 0 ) ); ?>
59
+ </ul>
60
+ <script>
61
+ $(function(){
62
+ //カテゴリの折り畳み
63
+ $(".tree-menu .children").hide();
64
+ $(".tree-menu li").hover(function() {
65
+ $(this).children('ul').slideDown(400);
66
+ }, function() {
67
+ $(this).children('ul').hide(400);
68
+ });
69
+ });
70
+ </script>
71
+ </div>
72
+ </body>
73
+ </html>
45
74
  ```

5

追加

2017/05/15 04:39

投稿

destrudo
destrudo

スコア143

title CHANGED
File without changes
body CHANGED
@@ -26,4 +26,20 @@
26
26
  </html>
27
27
  ```
28
28
  【追記】
29
- すみません。別のサイトのコードを試していました。このサイトを元に作ったコードはこれですが、これも動かないです。
29
+ すみません。別のサイトのコードを試していました。このサイトを元に作ったコードはこれですが、これも動かないです。
30
+
31
+ 【追記】htmlの構造です。
32
+ ```ここに言語を入力
33
+ <ul>
34
+ <li class="cat-item cat-item-26"><a href=">親カテゴリー</a>
35
+ <ul class='children'>
36
+ <li class="cat-item cat-item-20"><a href="example" >子カテゴリー１</a>
37
+ </li>
38
+ <li class="cat-item cat-item-18"><a href="example" >子カテゴリー２</a>
39
+ </li>
40
+ <li class="cat-item cat-item-21"><a href="example" >子カテゴリー３</a>
41
+ </li>
42
+ </ul>
43
+ </li>
44
+ </ul>
45
+ ```

4

変更

2017/05/15 04:36

投稿

destrudo
destrudo

スコア143

title CHANGED
File without changes
body CHANGED
@@ -7,65 +7,23 @@
7
7
 
8
8
  [このサイト](https://tetch1987.com/shittakabull/web/wp_list_categories-jquery-openslide/)を見て、
9
9
  ```ここに言語を入力
10
- <!DOCTYPE html>
11
- <html>
12
- <head>
13
- <meta charset="utf-8">
14
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
15
- </head>
16
- <body>
17
-
18
- <div class="wrap">
10
+ div class="wrap">
19
- <ul>
11
+ <ul id="CatList">
20
- <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'category_name', 'show_count' => 0 ) ); ?>
12
+ <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'tag', 'show_count' => 0 ) ); ?>
21
13
  </ul>
22
14
  <script>
23
- $(function(){
15
+
24
- //カテゴリの折り畳み
16
+
17
+
25
- $(".tree-menu .children").hide();
18
+ $("#CatList li").has('ul').prepend('<a class="Open"> </a>').children('ul').css({"display":"none"});
26
- $(".tree-menu li").hover(function() {
19
+ $('.Open').click(function(){
27
- $(this).children('ul').slideDown(400);
20
+ $(this).toggleClass('On').stop().nextAll('ul').slideToggle();
28
- }, function() {
29
- $(this).children('ul').hide(400);
30
- });
31
21
  });
32
22
  </script>
33
23
  </div>
34
24
 
35
25
  </body>
36
26
  </html>
37
-
38
27
  ```
39
- こんなコードも継ぎはぎしてみましたが、特に変わらずでした。
40
-
41
28
  【追記】
42
- 要素なかったですね。
43
- ```ここに言語を入力
44
- <ul>
45
- <li class="cat-item cat-item-26"><a href=">親カテゴリー</a>
46
- <ul class='children'>
47
- <li class="cat-item cat-item-20"><a href="example" >子カテゴリー１</a>
48
- </li>
49
- <li class="cat-item cat-item-18"><a href="example" >子カテゴリー２</a>
50
- </li>
51
- <li class="cat-item cat-item-21"><a href="example" >子カテゴリー３</a>
52
- </li>
53
- </ul>
54
- </li>
55
- </ul>
56
- ```
57
- 自分のそのページのソースコードをみるとこういう構造になっているのですが、どう指定したらいいでしょうか。
29
+ すみません。別のサイトのコードを試していました。このサイトを元に作ったコードはこれですが、これも動かないです。
58
-
59
- 【追記２】
60
- ```ここに言語を入力
61
- $(function(){
62
- //カテゴリの折り畳み
63
- $(".cat-item .cat-item-26 .children").hide();
64
- $(".cat-item .cat-item-26 li").hover(function() {
65
- $(this).children('ul').slideDown(400);
66
- }, function() {
67
- $(this).children('ul').hide(400);
68
- });
69
- });
70
- ```
71
- classのセレクタが２つあったので、スペースであけてみましたが、書き方違いますか。

3

追記

2017/05/15 03:39

投稿

destrudo
destrudo

スコア143

title CHANGED
File without changes
body CHANGED
@@ -54,4 +54,18 @@
54
54
  </li>
55
55
  </ul>
56
56
  ```
57
- 自分のそのページのソースコードをみるとこういう構造になっているのですが、どう指定したらいいでしょうか。
57
+ 自分のそのページのソースコードをみるとこういう構造になっているのですが、どう指定したらいいでしょうか。
58
+
59
+ 【追記２】
60
+ ```ここに言語を入力
61
+ $(function(){
62
+ //カテゴリの折り畳み
63
+ $(".cat-item .cat-item-26 .children").hide();
64
+ $(".cat-item .cat-item-26 li").hover(function() {
65
+ $(this).children('ul').slideDown(400);
66
+ }, function() {
67
+ $(this).children('ul').hide(400);
68
+ });
69
+ });
70
+ ```
71
+ classのセレクタが２つあったので、スペースであけてみましたが、書き方違いますか。

2

追記

2017/05/15 03:17

投稿

destrudo
destrudo

スコア143

title CHANGED
File without changes
body CHANGED
@@ -36,4 +36,22 @@
36
36
  </html>
37
37
 
38
38
  ```
39
- こんなコードも継ぎはぎしてみましたが、特に変わらずでした。
39
+ こんなコードも継ぎはぎしてみましたが、特に変わらずでした。
40
+
41
+ 【追記】
42
+ 要素なかったですね。
43
+ ```ここに言語を入力
44
+ <ul>
45
+ <li class="cat-item cat-item-26"><a href=">親カテゴリー</a>
46
+ <ul class='children'>
47
+ <li class="cat-item cat-item-20"><a href="example" >子カテゴリー１</a>
48
+ </li>
49
+ <li class="cat-item cat-item-18"><a href="example" >子カテゴリー２</a>
50
+ </li>
51
+ <li class="cat-item cat-item-21"><a href="example" >子カテゴリー３</a>
52
+ </li>
53
+ </ul>
54
+ </li>
55
+ </ul>
56
+ ```
57
+ 自分のそのページのソースコードをみるとこういう構造になっているのですが、どう指定したらいいでしょうか。

1

変更

2017/05/15 03:15

投稿

destrudo
destrudo

スコア143

title CHANGED
File without changes
body CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  <div class="wrap">
19
19
  <ul>
20
- <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'tag_name', 'show_count' => 0 ) ); ?>
20
+ <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'category_name', 'show_count' => 0 ) ); ?>
21
21
  </ul>
22
22
  <script>
23
23
  $(function(){