javascript - 嵌套折叠

Question

我正在尝试使用 jQuery 折叠嵌套菜单。我读过this answer而且，对我来说，它似乎与我的解决方案相似。问题是我的不起作用。

我认为我用 JavaScript 代码表达的是:“嘿，当用户单击作为 ul.submenu 父级的 li 时，获取其ul.submenu子项并将slideToggleonly附加到它”。但是，正如您从代码片段中看到的，它还关闭了父级 ul.submenu，我不明白为什么。

$(document).ready(function () {

    $('.submenu').hide();

    $('.submenu').parent('li').click(function () {
        $(this).children('ul.submenu').slideToggle("slow");
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul class="menu">
        <li>Home</li>
        <li>Blog
            <ul class="submenu">
                <li>
                    Author
                    <ul class="submenu">
                        <li>New</li>
                        <li>Handle</li>
                    </ul>
                </li>
                <li>
                    <span>Category</span>
                    <ul class="submenu">
                        <li>New</li>
                        <li>Handle</li>
                    </ul>
                </li>
                <li>
                    <span>Tag</span>
                    <ul class="submenu">
                        <li>New</li>
                        <li>Handle</li>
                    </ul>
                </li>
                <li>
                    <span>Post</span>
                    <ul class="submenu">
                        <li>New</li>
                        <li>Handle</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Photo</li>
        <li>Settings</li>
    </ul>
</nav>

Answer 1

您想要阻止单击事件在 DOM 中冒泡并触发父级上的单击处理程序。使用.stopPropagation()为此:

$(document).ready(function() {
  $('.submenu').hide();
  $('.submenu').parent('li').click(function(e) {
    e.stopPropagation()
    $(this).children('ul.submenu').slideToggle("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul class="menu">
    <li>Home</li>
    <li>Blog
      <ul class="submenu">
        <li>
          Author
          <ul class="submenu">
            <li>New</li>
            <li>Handle</li>
          </ul>
        </li>
        <li>
          <span>Category</span>
          <ul class="submenu">
            <li>New</li>
            <li>Handle</li>
          </ul>
        </li>
        <li>
          <span>Tag</span>
          <ul class="submenu">
            <li>New</li>
            <li>Handle</li>
          </ul>
        </li>
        <li>
          <span>Post</span>
          <ul class="submenu">
            <li>New</li>
            <li>Handle</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Photo</li>
    <li>Settings</li>
  </ul>
</nav>