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示例。

Answer 2

尝试以下方法：

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

Answer 3

$('li.dropdown').click(function() {
   $('.dropdown ul').hide();
    $(this).children('ul').show();
});

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

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

3 个答案: