ul/liを使用したアコーディオンメニュー：jQueryで「1つ開いたら他が全て閉じる」

Question

アコーディオンメニューを１つ開いたら他が閉じることを試行中なのですが。。

お世話になります。

html

        <ul class="accordion">
          <li>
            <p><a href="#">リスト1</a></p>
          </li>
          <li>
            <p>リスト2</p>
            <ul>
              <li><a href="#">サブリスト1</a></li>
              <li><a href="#">サブリスト2</a></li>
              <li><a href="#">サブリスト3</a></li>
              <li><a href="#">サブリスト4</a></li>
            </ul>
          </li>
          <li>
            <p>リスト3</p>
            <ul>
              <li><a href="#">サブリスト1</a></li>
              <li><a href="#">サブリスト2</a></li>
              <li><a href="#">サブリスト3</a></li>
              <li><a href="#">サブリスト4</a></li>
            </ul>
          </li>
          <li>
            <p><a href="#">リスト4</a></p>
          </li>
        </ul>

jQuery

  $(function(){
	$(".accordion p").click(function(){
	    $(this).next("ul").slideToggle(500);
	    $(this).toggleClass("open");
	});
  });

このように記述してるのですが、リスト2を開いた状態でリスト3を押すとリスト2が閉じる。という動作を行うためにはどうすればよいでしょうか・・・？

どなたかよろしくお願いします。

Answer 1

こんなかんじでどうでしょう。

  $(function(){
    $(".accordion p").click(function(){
        $(".accordion .open").removeClass("open").next("ul").slideToggle(500);
        $(this).next("ul").slideToggle(500);
        $(this).toggleClass("open");
    });
  });

---

追記：
これではどうでしょう。

  $(function(){
    $(".accordion p").click(function(){
        if ( $(this).hasClass("open") ) return;
        $(".accordion .open").removeClass("open").next("ul").slideUp(500);
        $(this).next("ul").slideDown(500);
        $(this).toggleClass("open");
    });
  });

---

追記2：

ちゃんとテストしないといけませんね、これではどうでしょう。

  $(function(){
    $(".accordion p").next("ul").slideUp(500);
    $(".accordion p").click(function(){
        if ( $(this).hasClass("open") ) {
        	$(this).removeClass("open").next("ul").slideUp(500);
        } else {
          $(".accordion .open").removeClass("open").next("ul").slideUp(500);
          $(this).next("ul").slideDown(500);
        	$(this).addClass("open");
        };
    });
  });
```**動くサンプル：**[https://jsfiddle.net/97w7p389/](https://jsfiddle.net/97w7p389/)

Comments

[thiikeigii]

ありがとうございます。理想の動きになりました。ただ、開いているリストを押したら閉じず、開いてしまうのですが、どうしたらいいでしょうか。。？

[thiikeigii]

再度追記ありがとうございます。閉じずに開いたままになってしまいました。自己解決できず申し訳ございません。

[thiikeigii]

理想の動きになりました！感謝しています。本当にありがとうございました！！

Answer 2

	$(".accordion p").click(function(){
		$clickEl = $(this);
		$('.open').each(function(){
			if(!$(this).is($clickEl)){
				$(this).next("ul").slideToggle(500);
				$(this).toggleClass("open");
			}
		})

		$clickEl.next("ul").slideToggle(500);
		$clickEl.toggleClass("open");

	});

開いている全ての要素に対して、クリックされた要素じゃなければ閉じる動作をつけています。

Comments

[thiikeigii]

申し訳ないです。動かなくて。。開かなくなりました。