jQuery 菜单 > 折叠当前树以外的所有内容

Question

菜单-片段

<ul class="Menu Open">
    <li>
        <a href="javascript:;" data-title="Account">
            <span class="Title">Account</span>
        </a>
        <ul class="sub-menu First TeStInG">
            <li>
                <a href="javascript:;" data-title="Account/Dashboard">
                    <span class="Title">Dashboard</span>
                </a>
            </li>
            <li>
                <a href="javascript:;" data-title="Account/Messages">
                    <span class="Title">Messages</span>
                </a>
                <ul>
                    <li>
                        <a href="javascript:;" data-title="Account/Messages/Compose">
                            <span class="Title">Compose</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;" data-title="Account/Profile">
                    <span class="Title">Profile</span>
                </a>
                <ul>
                    <li>
                        <a href="javascript:;" data-title="Account/Profile/View">
                            <span class="Title">View</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JQuery - 片段

$(document).ready(function() {

    "use strict";

    $(document).on('click', function(e) {
        if ($(e.target).closest($('.Menu')).length) {

            if ($(e.target).closest("a").siblings("ul").length === 0) {
                console.log('Doesn\'t have Children');
            } else {
                $(e.target).closest("a").siblings("ul").show();
            }

        }

    });

});

我正在努力实现的目标

在不使用 jQuery UI 的情况下，我想让它在每个级别上一次只显示一个菜单项。

• 如果用户多次展开一个级别，然后点击不同的更高级别，则应隐藏其中的所有级别。
• 如果用户点击展开的同级项目，所有其他同级应隐藏。

我已经尝试了几种方法来做到这一点，但是我一直被束缚着，而我要么隐藏不应该隐藏的东西，要么隐藏它以便我无法扩展任何东西。我以前做过，不明白为什么我现在不能这样做。

Answer 1

您可以使用find()，但是当您单击父项时，您必须检查它是否为父项，因此当您要打开时，您只想打开直接子项，但当您要关闭时，您要关闭所有子项.

$("ul li ul").hide()

$('li').click(function(e) {
  e.stopPropagation()
  var parent = $(this)
  $(this).find('ul').each(function() {
    if ($(this).is(':visible')) {
      $(this).hide()
    } else {
      if ($(this).parent().is(parent)) {
        $(this).show()
      }
    }
  })
  $(this).siblings().children('ul').hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Menu Open">
  <li>
    <a href="javascript:;" data-title="Account">
      <span class="Title">Account</span>
    </a>
    <ul class="sub-menu First TeStInG">
      <li>
        <a href="javascript:;" data-title="Account/Dashboard">
          <span class="Title">Dashboard</span>
        </a>
      </li>
      <li>
        <a href="javascript:;" data-title="Account/Messages">
          <span class="Title">Messages</span>
        </a>
        <ul>
          <li>
            <a href="javascript:;" data-title="Account/Messages/Compose">
              <span class="Title">Compose</span>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="javascript:;" data-title="Account/Profile">
          <span class="Title">Profile</span>
        </a>
        <ul>
          <li>
            <a href="javascript:;" data-title="Account/Profile/View">
              <span class="Title">View</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>