jquery - タグを含む階層リストまたはネストされたリストのJquery

Answer 1

Answer 2

ここで、上記のクエリの完全なサンプルビンを作成しました。falseを返す代わりに、階層的なイベントの発生を停止するJqueryのイベントオブジェクトメソッド「stopPropagation（）」を使用する必要があります。

デモ http://codebins.com/bin/4ldqp7e

HTML

<div class="main_list">
  <ul>
    <li>
      <a href="#">
        1.
      </a>
      <ul>
        <li>
          <a href="#">
            1.1
          </a>
          <ul>
            <li>
              <a href="#">
                1.1.1
              </a>
            </li>
          </ul>
        </li>
      </ul>
      <li>
        <a href="#">
          2.
        </a>
    </li>
    <li>
      <a href="#">
        3.
      </a>
      <ul>
        <li>
          <a href="#">
            3.1
          </a>
        </li>
        <li>
          <a href="#">
            3.2
          </a>
        </li>
      </ul>
      <li>
        <a href="#">
          4.
        </a>
        <ul>
          <li>
            <a href="#">
              4.1
            </a>
            <ul>
              <li>
                <a href="#">
                  4.1.1 
                </a>
              </li>
              <li>
                <a href="#">
                  4.1.2 
                </a>
              </li>
            </ul>
          </li>
        </ul>
    </li>
  </ul>
</div>

jQuery

$(function() {
    // only show top level elements to begin
    $("ul ul").hide();

    $("li").click(function(e) {
        //need to change here...
        e.stopPropagation();
        $(this).children("ul").toggle(500);
    });
});

CSS

li{
  list-style:none;
}
ul{
  margin:5px;
  padding:2px;
}

デモ http://codebins.com/bin/4ldqp7e