show hide specific li at bootstrap

As you ll see at code i use bootstrap and i build a left column using nav nav-pills nav-stacked.This is a ul that contains some li such section1,section2,section3,section4,section5.That i want is to show section1,section2 and section5 and ONLY when i click to section2 expands under this section,section3 and 4 (Show only first second and fith li and when click second li expands third and fourth).I noticed collapse at bootstrap but i want to build with javascript or jquery at my own.Any help will be great guys.

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');
});

Generally if you want to hide an element is it better to encapsulates it to the element that you will click it such as :

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

Maybe this way i am going to build this, its not the appropriate because i am not experienced yet.Any suggestions,corrections,advices for the code above will be great.thanks in advance!

---

Your jQuery code has 2 main issues:

In your first selector (the one you are binding your click event to), you have a misspelling. .nav.navpills.nav-stacked .forclick should be .nav.nav-pills.nav-stacked .forclick .

Your find jQuery function limits the search to the descendants of your this element. You can see that the elements you want to target are siblings. Just the selector will work in this case.

jQuery

$('.nav.nav-pills.nav-stacked .forclick').click(function() {
    $('.nav.nav-pills.nav-stacked .hiden').slideToggle('slow');
});

Live example

http://jsfiddle.net/6wazs6xj/

链接地址: http://www.djcxy.com/p/83662.html

上一篇: 改变导航丸bootstrap的颜色

下一篇: 在bootstrap中隐藏特定的li