在引导程序中显示隐藏特定的 li答案

【问题标题】：show hide specific li at bootstrap在引导程序中显示隐藏特定的 li
【发布时间】：2015-04-08 15:56:19
【问题描述】：

正如您将在代码中看到的那样，我使用引导程序并使用 nav nav-pills nav-stacked 构建左列。这是一个包含一些 li 的 ul，例如 section1、section2、section3、section4、section5。我想要的是显示第 1 节、第 2 节和第 5 节，并且仅当我单击第 2 节在此节、第 3 节和第 4 节下展开时（仅显示第一个第二个和第五个 li，当单击第二个 li 展开第三个和第四个时）。我注意到引导程序崩溃但我想我自己用 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>

也许我要这样构建它，它不合适，因为我还没有经验。任何建议，更正，上面代码的建议都会很棒。提前谢谢！

【问题讨论】：

请整理一下你的代码格式，这段代码难看！让阅读和随后发现错误变得更加困难。
最后一部分是yes，但是前2个sn-ps没变。
感谢和抱歉您的失败视图
@Gvra 你可以使用jsfiddle.net 更容易帮助你
为你格式化了 html sn-ps

标签： javascript html css twitter-bootstrap

【解决方案1】：

您的 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/

【讨论】：