Question

正如你在代码中看到我使用bootstrap并使用nav nav-pills nav-stacked构建一个左列。这是一个ul包含一些li，如section1，section2，section3，section4，section5。我想要的是显示section1，section2和section5，只有当我点击section2扩展到本节下面的section3和4时（仅显示第一个第二个和fith li，当点击第二个li扩展第三个和第四个）。我注意到在bootstrap崩溃但我想要用我自己的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>

也许这样我会建立这个，它不合适，因为我没有经验。任何建议，更正，上面的代码的建议将是伟大的。提前谢谢！

Answer 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/

show hide特定li在bootstrap

1 个答案: