单击显示/隐藏ul ul上的HTML / jQuery

Question

我有这个HTML代码

<ul>
    <li><a href="#">link</a>
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
      </ul>
    </li>

    <li><a href="#">link</a>
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
      </ul>
    </li>

  </ul>

现在我想要 - ＆gt;隐藏所有子菜单 - ＆gt;如果我点击主要li元素 - ＆gt;如果我点击另一个主要li元素显示子菜单并隐藏以前显示的子菜单，则显示当前li的子菜单和下一个菜单。

任何人都可以帮助我吗？

Answer 1

您可以使用点击事件

执行此类简单操作

$('#main>li>a').click(function() { // bind click event to a tag
  $(this)
    .next() // get ul inside
    .stop() // stop any previous animation
    .slideToggle() // toggle the visibility
    .end() // back to previous selector , here the clicked element
    .parent() // get parent li
    .siblings() // get its siblings
    .find('ul') // get ul inside them
    .stop() // stop any previous animation
    .slideUp() // hide them
});

#main>li>ul {
  /* hide sub ul initially */
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="main">
  <li><a href="#">link</a>
    <ul>
      <li><a href="#">link</a>
      </li>
      <li><a href="#">link</a>
      </li>
      <li><a href="#">link</a>
      </li>
    </ul>
  </li>

  <li><a href="#">link</a>
    <ul>
      <li><a href="#">link</a>
      </li>
      <li><a href="#">link</a>
      </li>
      <li><a href="#">link</a>
      </li>
    </ul>
  </li>

</ul>

Answer 2

你可以这样做DEMO

$('li ul').hide();
$('li a').click(function() {
  $(this).next('ul').slideToggle();
  $('ul li ul').not($(this).next('ul')).slideUp();
});