javascript - bootstrap 下拉菜单设置显示 :none when collapsed

Question

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

这是我的 list

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

Answer 1

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>