jqueryを利用したスマホ対応のアコーディオンメニューを導入したいです。

#Javascript　jqueryを利用してアコーディオンメニューをページに導入したいです。

レイアウト

□□←ブロック<div>が2つ横に並んでいる
□□←ブロック<div>が2つ横に並んでいる
□□←ブロック<div>が2つ横に並んでいる

レスポンシブページで以下のようなアコーディオンメニューを作りたいです。

参考ページニトリ
ニトリの下部のカテゴリ欄がスマホレスポンシブ表示されたときの動き

■□←黒ブロックをクリックしたさいに、隣のブロックは動かず
■■したのブロックにアコーディオンメニューがドロップダウンしていく
■■

このような形のjqueryがないか探しているのですが、見つかりません。

そもそもこのような表示にする場合はCSSを利用してドロップダウンするメニューを
position:absoluteで下部へ移動して使うものなのかもわかりません。

ご教示お願い致します。

現状はこのような記述を行っております。

 <div class="cate">	
	
<div class="te1">
<ul class="accordion3">
<li>
<p class="ac1">アコーディオン</p>
<ul class="inner">
<li class="content1-1">コンテンツ１</li>
<li class="content1-2">コンテンツ２</li>
<li class="content1-3">コンテンツ３</li>
</ul>
</li>
</ul>
</div>
<div class="te2">
<ul class="accordion3">
<li>
<p class="ac1">アコーディオン</p>
<ul class="inner">
<li class="content1-1">コンテンツ１</li>
<li class="content1-2">コンテンツ２</li>
<li class="content1-3">コンテンツ３</li>
</ul>
</li>
</ul>
</div>
<div class="te3">
<ul class="accordion3">
<li>
<p class="ac1">アコーディオン</p>
<ul class="inner">
<li class="content1-1">コンテンツ１</li>
<li class="content1-2">コンテンツ２</li>
<li class="content1-3">コンテンツ３</li>
</ul>
</li>
</ul>
</div>
<div class="te4">
<ul class="accordion3">
<li>
<p class="ac1">アコーディオン</p>
<ul class="inner">
<li class="content1-1">コンテンツ１</li>
<li class="content1-2">コンテンツ２</li>
<li class="content1-3">コンテンツ３</li>
</ul>
</li>
</ul>
</div>
</div>	
	
	
	
	
	
	
	
<script>
$(function(){
 
//.accordion3の中のp要素がクリックされたら
 $('.accordion3 p').click(function(){
//クリックされた.accordion3の中のp要素に隣接するul要素が開いたり閉じたりする。
$(this).next('ul').slideToggle();
});
});
</script>
<style>
				
　　.cate{width:640px; margin-left:auto; margin-right:auto;}　
　　ul{padding:0;}　
　　li{display: inline-block;}　
　.te1,.te2,.te3,.te4{margin:0px; width:49%; float:left;}
　.accordion3 {text-align: center;}　
　.accordion3 .inner {display: none;}　
　.accordion3 .inner.open {display: block;}　
　.accordion3 p{cursor: pointer; margin:0;}　
　.accordion3 p.ac1{background: #F50057; width:300px;}　
　.accordion3 .inner li.content1-1{background: #F50057; padding:0;}　
　.accordion3 .inner li.content1-2{background: #F50057; padding:0;}　
　.accordion3 .inner li.content1-3{background: #F50057; padding:0;}　
　.accordion3 li{list-style: none; margin: 0px}
</style>
``` 　

ボディー内です。
metaタグには、jquery3.4.1を入れてあります。

miyabi_pudding

2019/11/13 04:54

現状の意図した動作にならないコードで構いませんので、自身で書いたソースコードを質問文に記載しましょう。質問文は編集が可能です。また、ソースコードを記載する時は、コードブロックを用いましょう。 ```ここに言語名ここにソースコード ``` という形です。

mon1992

2019/11/13 07:51

ご指摘ありがとうございます。ソースコードを載せました。

miyabi_pudding

2019/11/13 09:43

コードブロックを使ってください。それと、できれば圧縮前をいただけないでしょうか？圧縮前が、コンパイル前（sassとかwebpackだとしても）とかでもいいので。

mon1992

2019/11/13 12:52

コードブロックのタグをクリックしたらよかったのですね。たびたびご迷惑おかけして申し訳ありません。このようなソースになります。ニトリのページにあるような形でなくても、これでもいいかと思ったのですが、カテゴリをドロップダウンするとどうしてもスタイルが一瞬歪んで画面がぶれるので、閲覧者を画面酔いさせてしまいそうなのでニトリページのアコーディオンを入れたいと思いました。

行動規範の内容に同意します

回答1件

ベストアンサー

回答が遅くなり申し訳ございません。

まず、三点ほど。

<style>要素内に、大量の全角スペースが入っておりました。これはエラーになるのでやめましょう。

（改行を入れた時に入ったのでしょうけど、そこも含めて気をつけましょう）

<style>要素は、基本的に、<head>要素内に入れるのが基本的なHTML文法なので、そうするようにしましょう。（もちろんbody内に入れても、動くっちゃ動く）
インデントはしっかりつけましょう。これは、自分であとで、見返した時に、また他の人に作業を譲渡する際に、混乱とエラーの元になります。

未圧縮に戻そうとした際にそうなったのでしょうけど、次質問する時には気をつけましょう。
（インデントそろってないだけで、上記と同じ理由で、回答者さん方も回答する気失せるものなので）

さて回答に移ります。

ニトリのように、パッと表示非表示、でよろしいなら、下記で十分でしょう。

javascript
1$(function(){
2
3//.accordion3の中のp要素がクリックされたら
4$('.accordion3 p').click(function(){
5  //クリックされた.accordion3の中のp要素に隣接するul要素が開いたり閉じたりする。
6  // 後に使いやすいように変数にulを格納
7  const ulDom = $(this).next('ul');
8  // 非表示ならtrueを格納した変数を用意
9  const showFlg = ulDom.css('display') == 'none';
10  // trueなら表示、falseなら非表示にする
11  ulDom[showFlg ? 'show' : 'hide']();
12});
13
14});