javascript - 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()，但是当您单击父级时，您必须检查它是否是父级，因此当您想打开时，您只想打开直接子级，但当您想要close 您想要关闭所有子级。

$("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>