HTML/jQuery点击显示/隐藏ul

HTML/jQuery on click show/hide ul ul

本文关键字：隐藏 ul 显示 jQuery HTML      更新时间：2023-09-26

我有这个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>

现在我想->隐藏所有子菜单->如果我点击主li元素->显示当前li的子菜单，然后如果我点击另一个主li元素显示子菜单并隐藏以前显示的子菜单。

有人能帮我吗？

你可以这样做DEMO

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

您可以用点击事件做一些简单的事情

$('#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>

相关文章：