0

我需要在我的网页上显示一些类别及其子类别。所以我把它们以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。

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

4

3 回答 3

11

所以这个想法是隐藏除 clicked 之外的所有内容li，然后为 clicked 切换子类别可见性：

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

这是带有示例的jsFiddle 。

于 2012-11-23T11:48:04.587 回答
1

尝试以下操作：

$('li.dropdown').click(function() {
   $(this).find('ul').toggle();
});
于 2012-11-23T11:42:54.887 回答
1 
$('li.dropdown').click(function() {
   $('.dropdown ul').hide();
    $(this).children('ul').show();
});

试试这个http://jsfiddle.net/7NYhe/

于 2012-11-23T11:48:13.203 回答