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

Question

我需要在我的网页及其子类别上显示几个类别.所以我以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页面的head部分添加了以下Javascript脚本

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

---

最初,效果很好,并且隐藏了所有子类别.但是,我想,当我点击时Data mining and data warehousing,然后两个子类别也应该变得可见,这些Data mining techniques和Knowledge discovery.

---

此外,当我点击其他类别时,先前打开的类别的子类别应再次折叠.我怎样才能做到这一点 ？

Answer 1

因此,我们的想法是隐藏所有点击的内容li,然后切换所点击的子类别的可见性:

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

这是jsFiddle的例子.