在bootstrap中隐藏特定的li
正如你会看到在代码我使用bootstrap和我建立一个左列使用导航nav-pills导航堆叠。这是一个UL包含一些锂这样的section1，section2，section3，section4，section5.That我想显示section1 ，第2节和第5节，只有当我点击第2节扩大本节下，第3节和第4节（只显示第一秒和第锂，当点击第二李扩展第三和第四）。我注意到在引导崩溃，但我想用JavaScript构建或jquery在我自己的。任何帮助将是伟大的人。
的jsfiddle
HTML
<div class="container">
<div class="row">
<div class="leftcol col-md-4">
<ul class="nav nav-pills nav-stacked">
<li role="presentation">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="24" height="20" src="icon.gif">
</span>
Section1
</a>
</li>
<li role="presentation" class="forclick">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="26" height="20" src="icon2.gif">
</span>
Section2
</a>
</li>
<li role="presentation" class="hiden">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="26" height="20" src="icon3.gif">
</span>
Section3
</a>
</li>
<li role="presentation" class="hiden">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="26" height="20" src="icon4.gif">
</span>
Section4
</a>
</li>
<li role="presentation">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="26" height="20" src="icon5.gif">
</span>
Section5
</a>
</li>
</ul>
</div>
</div>
</div>
CSS：
.leftcol{
width:18%;
}
.nav.nav-pills.nav-stacked .hiden{
display:none;
}
JAVASCRIPT：
$('.nav.navpills.nav-stacked .forclick').click(function() {
$(this).find('.nav.nav-pills.nav-stacked .hiden').slideToggle('slow');
});
一般来说，如果你想隐藏一个元素，最好把它封装到你要单击的元素上，比如：
<ul class="nav nav-pills nav-stacked">
<li role="presentation">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="24" height="20" src="icon.gif">
</span>
Section1
</a>
</li>
<li role="presentation" class="forclick">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="26" height="20" src="icon2.gif">
</span>
Section2
</a>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="hiden">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="26" height="20" src="icon3.gif">
</span>
Section3
</a>
</li>
<li role="presentation" class="hiden">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="26" height="20" src="icon4.gif">
</span>
Section4
</a>
</li>
</ul>
</li>
<li role="presentation">
<a href="#">
<span class="icon" aria-hidden="true">
<img alt="Notifications" width="26" height="20" src="icon5.gif">
</span>
Section5
</a>
</li>
</ul>
也许这种方式我要建立这个，它不适合，因为我还没有经验。任何建议，更正，对上述代码的建议将是伟大的，感谢提前！
你的jQuery代码有两个主要问题：
在您的第一个选择器（您将单击事件绑定到的那个选择器）中，拼写错误。 .nav.navpills.nav-stacked .forclick应该是.nav.nav-pills.nav-stacked .forclick 。
你find jQuery函数将搜索限制在你的this元素的后代。 你可以看到你想要的元素是兄弟姐妹。 只是选择器将在这种情况下工作。
jQuery的
$('.nav.nav-pills.nav-stacked .forclick').click(function() {
$('.nav.nav-pills.nav-stacked .hiden').slideToggle('slow');
});
现场示例
http://jsfiddle.net/6wazs6xj/
链接地址: http://www.djcxy.com/p/83661.html