javascript

我需要在我的网页上显示一些类别以及它们的子类别。因此，我以nested <ul> <li>标记的形式对其进行了排列。我希望获得这样的效果，即只有当用户单击类别之一时，所有子类别才应该可见。最初，没有子类别可见。

在身体部位，我已经做到了

<ul>
   <li class="dropdown">Data mining and data warehousing
      <ul>
           <li>Data mining techniques</li>
           <li>Knowledge discovery</li>
      </ul>
   </li>

    <li class="dropdown">Soft computing and artificial intelligence
       <ul>
            <li>Fuzzy systems</li>
            <li>Neural networks</li>
       </ul>
    </li>
</ul>

在css部分，我已经完成了

li.dropdown ul {
display : none;
}

并且我在html页面的开头部分添加了以下Javascript脚本

<script type="text/javascript">
$('li.dropdown').click(function() {
   $(this).children('ul').toggle();
});
</script>

最初，效果很好，并且所有子类别都被隐藏。但是，我想说，当我单击Data mining and data warehousing时，这两个子类别也应该可见，分别是Data mining techniques和Knowledge discovery。

另外，当我单击其他类别时，以前打开的类别的子类别应再次折叠。我怎样才能做到这一点？

最佳答案

因此，想法是隐藏除单击的li以外的所有内容，然后为单击的对象切换子类别的可见性：

$('li.dropdown').click(function() {
   $('li.dropdown').not(this).find('ul').hide();
   $(this).find('ul').toggle();
});

这是带有示例的jsFiddle。

关于javascript - 使用Javascript隐藏并显示<ul>和<li>，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13528381/

javascript - 使用Javascript隐藏并显示<ul>和<li>