teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

WordPress記述をHTMLに変更

2017/09/05 08:04

投稿

hrn
hrn

スコア17

title CHANGED
File without changes
body CHANGED
@@ -31,52 +31,67 @@
31
31
  </script>
32
32
  ```
33
33
 
34
- ↓ドロワーメニュー(WordPress)
34
+ ↓ドロワーメニュー
35
35
  ```
36
+ <!--drawer start-->
36
- <body class="drawer drawer--left">
37
+ <body class="drawer drawer--left">
37
- <div id="slider-aontainer"></div>
38
+ <div id="slider-aontainer"></div>
38
- <main>
39
+ <main>
39
- <button type="button" class="drawer-toggle drawer-hamburger">
40
+ <button type="button" class="drawer-toggle drawer-hamburger">
40
- <span class="sr-only">toggle navigation</span>
41
+ <span class="sr-only">toggle navigation</span>
41
- <span class="drawer-hamburger-icon"></span>
42
+ <span class="drawer-hamburger-icon"></span>
42
- <span class="drawer_title">contents menu</span>
43
+ <span class="drawer_title">contents menu</span>
43
- </button>
44
+ </button>
44
- <nav class="drawer-nav">
45
+ <nav class="drawer-nav">
45
- <ul class="drawer-menu">
46
+ <ul class="drawer-menu">
46
- <li>
47
- <ul>
48
- <a href="/index.php?cat=5#contents">カテゴリ名</a>
49
-
50
- <?php query_posts("cat=5&order=DESC&posts_per_page=10"); ?>
51
- <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
52
-
53
47
  <li>
48
+ <ul>
54
- <a href="<?php the_permalink(); ?>" target="_blank">
49
+ <a href="#">カテゴリ名</a>
55
- <p><?php the_title(); ?> : <?php nskw_subtitle(); ?></p>
50
+ <li><a href="#">contents</a></li>
51
+ <li><a href="#">contents</a></li>
52
+ <li><a href="#">contents</a></li>
53
+ <li><a href="#">contents</a></li>
54
+ <li><a href="#">contents</a></li>
55
+ <div class="more">
56
+ <li><a href="#">contents</a></li>
57
+ <li><a href="#">contents</a></li>
58
+ <li><a href="#">contents</a></li>
59
+ </div>
56
- </a>
60
+ </ul>
57
- </li>
61
+ </li>
62
+ <li>
63
+ <ul>
64
+ <a href="#">カテゴリ名</a>
65
+ <li><a href="#">contents</a></li>
66
+ <li><a href="#">contents</a></li>
67
+ <li><a href="#">contents</a></li>
68
+ <li><a href="#">contents</a></li>
69
+ <li><a href="#">contents</a></li>
70
+ <div class="more">
71
+ <li><a href="#">contents</a></li>
72
+ <li><a href="#">contents</a></li>
73
+ <li><a href="#">contents</a></li>
74
+ </div>
75
+ </ul>
76
+ </li>
77
+ <li>
78
+ <ul>
79
+ <a href="#">カテゴリ名</a>
80
+ <li><a href="#">contents</a></li>
81
+ <li><a href="#">contents</a></li>
82
+ <li><a href="#">contents</a></li>
83
+ <li><a href="#">contents</a></li>
84
+ <li><a href="#">contents</a></li>
85
+ <div class="more">
86
+ <li><a href="#">contents</a></li>
87
+ <li><a href="#">contents</a></li>
88
+ <li><a href="#">contents</a></li>
89
+ </div>
90
+ </ul>
91
+ </li>
92
+ </ul>
93
+ </nav>
58
94
 
59
- <?php endwhile; endif; ?>
60
-
61
- <div class="more">
62
-
63
- <?php query_posts("showposts=-1&offset=10&cat=5&order=DESC"); ?>
64
- <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
65
-
66
- <li>
67
- <a href="<?php the_permalink(); ?>" target="_blank">
68
- <p><?php the_title(); ?> : <?php nskw_subtitle(); ?></p>
69
- </a>
70
- </li>
71
-
72
- <?php endwhile; endif; ?>
73
- <?php wp_reset_query(); ?>
74
-
75
- </div>
76
-
77
- </ul>
78
- </li>
79
- </ul>
80
95
  ```
81
96
 
82
97
  ###試したこと

3

試したことを追記しました。

2017/09/05 08:04

投稿

hrn
hrn

スコア17

title CHANGED
File without changes
body CHANGED
@@ -83,7 +83,6 @@
83
83
  最初から高さを取得させるためにもっと読む内のコンテンツを開けておき
84
84
  ドロワーメニューに触れた時に、display:none;で非表示
85
85
  もっと読むクリック時に、display:block;で表示
86
- を設定してみたが変化がありませんでした。
87
86
  ```
88
87
  <script>
89
88
  $(function() {
@@ -93,6 +92,7 @@
93
92
  });
94
93
  </script>
95
94
  ```
95
+ 上記の状態だと、1度は実現したい形になるものの、再度ドロワーメニューを開くと元に戻ってしまう
96
96
 
97
97
  ###補足情報(言語/FW/ツール等のバージョンなど)
98
98
  より詳細な情報

2

状況がわかるよう追加しました。

2017/09/05 06:51

投稿

hrn
hrn

スコア17

title CHANGED
File without changes
body CHANGED
@@ -31,6 +31,54 @@
31
31
  </script>
32
32
  ```
33
33
 
34
+ ↓ドロワーメニュー(WordPress)
35
+ ```
36
+ <body class="drawer drawer--left">
37
+ <div id="slider-aontainer"></div>
38
+ <main>
39
+ <button type="button" class="drawer-toggle drawer-hamburger">
40
+ <span class="sr-only">toggle navigation</span>
41
+ <span class="drawer-hamburger-icon"></span>
42
+ <span class="drawer_title">contents menu</span>
43
+ </button>
44
+ <nav class="drawer-nav">
45
+ <ul class="drawer-menu">
46
+ <li>
47
+ <ul>
48
+ <a href="/index.php?cat=5#contents">カテゴリ名</a>
49
+
50
+ <?php query_posts("cat=5&order=DESC&posts_per_page=10"); ?>
51
+ <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
52
+
53
+ <li>
54
+ <a href="<?php the_permalink(); ?>" target="_blank">
55
+ <p><?php the_title(); ?> : <?php nskw_subtitle(); ?></p>
56
+ </a>
57
+ </li>
58
+
59
+ <?php endwhile; endif; ?>
60
+
61
+ <div class="more">
62
+
63
+ <?php query_posts("showposts=-1&offset=10&cat=5&order=DESC"); ?>
64
+ <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
65
+
66
+ <li>
67
+ <a href="<?php the_permalink(); ?>" target="_blank">
68
+ <p><?php the_title(); ?> : <?php nskw_subtitle(); ?></p>
69
+ </a>
70
+ </li>
71
+
72
+ <?php endwhile; endif; ?>
73
+ <?php wp_reset_query(); ?>
74
+
75
+ </div>
76
+
77
+ </ul>
78
+ </li>
79
+ </ul>
80
+ ```
81
+
34
82
  ###試したこと
35
83
  最初から高さを取得させるためにもっと読む内のコンテンツを開けておき
36
84
  ドロワーメニューに触れた時に、display:none;で非表示

1

試したこと、更新

2017/09/05 06:48

投稿

hrn
hrn

スコア17

title CHANGED
File without changes
body CHANGED
@@ -37,16 +37,13 @@
37
37
  もっと読むクリック時に、display:block;で表示
38
38
  を設定してみたが変化がありませんでした。
39
39
  ```
40
- <script>
40
+ <script>
41
- $(function() {
41
+ $(function() {
42
- $('button.drawer-toggle drawer-hamburger').mouseover(function(e){
42
+ $('button.drawer-toggle.drawer-hamburger').hover(function(){
43
- $('.more li').css('display', 'none');
43
+ $('.more li, .close').css('display', 'none');
44
- });
44
+ });
45
- $('p.more').click(function(){
46
- $('p.more').css('display', 'block');
47
- });
45
+ });
48
- });
49
- </script>
46
+ </script>
50
47
  ```
51
48
 
52
49
  ###補足情報(言語/FW/ツール等のバージョンなど)