Question

在我的菜单中，我只想显示活跃的ul - s。这意味着如果我单击其他链接，则应隐藏先前活动的元素。在下面的示例中，如果Item-1处于有效状态且我点击Item-2，则应隐藏Item-1。

＆＃13;

$(document).ready(function () {

  $('#main-menu').on('click', function (event) {
    $(event.target).parent().children('ul').toggleClass('hidden');
    $(event.target).parent().children('ul').addClass('is_open');
    $('#main-menu').toggleClass('is_closed');

    if ($(event.target).parent().children().length <= 1) {
      $('#main-menu .is_open').toggleClass('hidden');
      $('#main-menu ul').removeClass('is_open');
      $('#main-menu').addClass('is_closed');
    }
  });


});

＆＃13;

.sm ul {
  display: block;
}

.sm .hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<ul id="main-menu" class="sm sm-simple">
  <li><a href="#">Item 1</a>
    <ul class="hidden">
      <li><a href="#">Item 1-1</a>
          <ul class="hidden">
            <li><a href="#">Item 1-1-1</a></li>
            <li><a href="#">Item 1-1-2</a></li>
            <li><a href="#">Item 1-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 1-2</a></li>
      <li><a href="#">Item 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul class="hidden">
      <li><a href="#">Item 2-1</a>
          <ul class="hidden">
            <li><a href="#">Item 2-1-1</a></li>
            <li><a href="#">Item 2-1-2</a></li>
            <li><a href="#">Item 2-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 2-2</a></li>
      <li><a href="#">Item 2-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul class="hidden">
      <li><a href="#">Item 3-1</a>
          <ul class="hidden">
            <li><a href="#">Item 3-1-1</a></li>
            <li><a href="#">Item 3-1-2</a></li>
            <li><a href="#">Item 3-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 1

所做的更改

添加了以下代码以隐藏所有ul

$('ul').addClass('hidden');

出于优化目的，我使用了

$('#main-menu .is_open').toggleClass('hidden is_open is_closed');

$(event.target).parent().children('ul').toggleClass('hidden is_open');

工作演示

$(document).ready(function () {

  $('#main-menu').on('click', function (event) {
    $('ul').addClass('hidden');
    $(event.target).parent().children('ul').toggleClass('hidden is_open');
    $('#main-menu').toggleClass('is_closed');
    if ($(event.target).parent().children().length <= 1) {
      $('#main-menu .is_open').toggleClass('hidden is_open is_closed');
    }
  });


});

.sm ul {
  display: block;
}

.sm .hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<ul id="main-menu" class="sm sm-simple">
  <li><a href="#">Item 1</a>
    <ul class="hidden">
      <li><a href="#">Item 1-1</a>
          <ul class="hidden">
            <li><a href="#">Item 1-1-1</a></li>
            <li><a href="#">Item 1-1-2</a></li>
            <li><a href="#">Item 1-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 1-2</a></li>
      <li><a href="#">Item 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul class="hidden">
      <li><a href="#">Item 2-1</a>
          <ul class="hidden">
            <li><a href="#">Item 2-1-1</a></li>
            <li><a href="#">Item 2-1-2</a></li>
            <li><a href="#">Item 2-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 2-2</a></li>
      <li><a href="#">Item 2-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul class="hidden">
      <li><a href="#">Item 3-1</a>
          <ul class="hidden">
            <li><a href="#">Item 3-1-1</a></li>
            <li><a href="#">Item 3-1-2</a></li>
            <li><a href="#">Item 3-1-3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
    </ul>
  </li>
</ul>

Answer 2

您可以切换$(this)并隐藏兄弟姐妹DEMO

$('#main-menu > li > a').click(function() {
  $(this).next('.hidden').toggle();
  $('#main-menu > li > a').not($(this)).next('.hidden').hide();
})

您还可以toggleClass DEMO

$('#main-menu > li > a').click(function() {
  $(this).next('.hidden').toggleClass('active');
  $('#main-menu > li > a').not($(this)).next('.hidden').removeClass('active');
})

对于ul内的嵌套li，您可以执行此操作DEMO

$('ul  li  a').click(function() {
  $(this).next('.hidden').slideToggle();
  $(this).parent().siblings().find('ul').slideUp();
})

单击时隐藏所有打开的兄弟元素

2 个答案: