bootstrap下拉菜单在折叠时设置display:none

时间:2014-06-21 15:00:32

标签: javascript jquery css twitter-bootstrap drop-down-menu

我在bootstrap中有一个下拉菜单。当我点击我的元素时,它显示下拉列表,当我点击它时,它会折叠下拉菜单。但是,当我点击时,该元素也消失了,我检查了,它显示:无设置。为什么会这样?

这是我的清单

<ul class="menu nav navbar-nav">
<li class="" id="current">
    <a class="" href=""> Nyheter</a>
</li>
<li class="">
    <a class="" href="">test</a>
</li>
<li class="">
    <a class="" href="">Schema</a>
</li>
<li class=" dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="/info">Info </a>
    <ul class="dropdown-menu">
        <li class="">
            <a class="" href="/info/checklista">Checklista</a>
        </li>
        <li class="">
            <a class="" href="/info/laenkar"> Länkar</a>
        </li>
        <li class="">
            <a class="" href="asd"> test2</a>
        </li>
    </ul>
</li>
<li class="">
    <a class="" href="/bilder"> Bilder </a>
</li>
<li class="">
    <a class="" href="/kontakt"> Kontakt </a>
</li>

1 个答案:

答案 0 :(得分:0)

<强> Demo

<nav id='myNavbar' class='navbar navbar-default' role='navigation'>
    <!-- Brand and toggle get grouped -->
    <div class='container'>

    <!-- you are missing this part below -->

        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#bs-example-navbar-collapse-1'> 
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>

            </button> <a class='navbar-brand' href='#'>Menu</a>

        </div>


        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
            <ul class="menu nav navbar-nav">
                <li class="" id="current"> <a class="" href=""> Nyheter</a>

                </li>
                <li class=""> <a class="" href="">test</a>

                </li>
                <li class=""> <a class="" href="">Schema</a>

                </li>
                <li class=" dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="/info">Info </a>

                    <ul class="dropdown-menu">
                        <li class=""> <a class="" href="/info/checklista">Checklista</a>

                        </li>
                        <li class=""> <a class="" href="/info/laenkar"> Länkar</a>

                        </li>
                        <li class=""> <a class="" href="asd"> test2</a>

                        </li>
                    </ul>
                </li>
                <li class=""> <a class="" href="/bilder"> Bilder </a> 
                </li>
                <li class=""> <a class="" href="/kontakt"> Kontakt </a> 
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
</nav>