切换所有<li> s直到下一步</li> <li class =“nav-header”>并在Bootstrap中过滤nav-list </li>

Question

我有来自Twitter Bootstrap的fluid.html示例 - 左边的导航列表让我头疼了过去几个小时。我需要做其中一件或两件事：

1. 过滤导航列表 - 或多或少这样做：http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/ - 虽然它在这个网站上运行良好，我无法在Bootstrap中过滤导航列表中的元素而不会破坏它的样子。

2. 点击其中一个<li>元素，将所有<li class="nav-header">切换到下一个<li class="nav-header">。如果我有：

   • 第1类
     • Link 1
     • Link 2
     • Link 3
   • 第2类
     • Link 4
     • Link 5
     • Link 6

...单击类别1应切换链接1,2和3，单击类别2应仅切换链接4,5和6。我已经尝试过jQuery Collapse插件，但它打破了导航列表样式。我还尝试在<div>之间切换<li>我所有<li class="nav-header">的内容，但它也打破了导航列表样式。我有一个想法，用相同的ID切换所有<li>，但我不知道如何使用jQuery或纯JavaScript。

知道如何做这些事情中的一个或两个吗？提前谢谢。

Answer 1

只需检查是否有孩子<ul>，然后点击jQuery进行切换。

<script>
    $('li').on('click', function() {
        $(this).children('ul').toggle();
    });
</script>

Answer 2

好的，我最后用jQuery和第一个例子修复了列表过滤。问题是，jQuery是在文档末尾加载的，脚本要求在表单之前加载它。所以，有效：）