Question

我在Bootstrap导航菜单中遇到问题。当我刚刚重新加载页面时，切换按钮工作正常，即点击它会显示li项目。但是，在第一次单击后，它不起作用。在我的主页面中，我已经有一个Bootstrap导航菜单，它工作得非常好。我的子页面出现问题。

这是我第一次呈现的代码：

<nav class="navbar navbar-default" role="tab">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
            <ul class="nav navbar-nav" id="tabHeader">
                <li>
                    <a class="dropdown-toggle align-center tabColor" id="divFavItemsTab" data-toggle onclick="ShowFavouriteNew();">
                        <asp:Literal ID="literalMyFav" runat="server" Text="<%$ Resources:Resource,lblMyFavorites %>"></asp:Literal>
                    </a>
                </li>
                <li>
                    <a class="dropdown-toggle align-center tabColor" id="divMyItemsListTab" datatoggle onclick="ShowMyItemsNew();">
                        <asp:Literal ID="literalCmpitems" runat="server" Text="<%$ Resources:Resource,lblCompanyItem %>"></asp:Literal>
                    </a>
                </li>
                <li>
                    <a class="dropdown-toggle align-center tabColor" id="divPackageTab" onclick="ShowPackagesNew();">
                        <asp:Literal ID="ltrlCmpPackages" runat="server" Text="<%$ Resources:Resource,lblPackage %>"></asp:Literal>
                    </a>
                </li>
                <li>
                    <a class="dropdown-toggle align-center tabSelected" id="divOnlineTab" onclick="ShowOnlineNew();">
                        <asp:Literal ID="ltrlOnline" runat="server" Text="<%$ Resources:Resource,lblOnline %>"></asp:Literal>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

当我点击切换按钮时，这是我的代码：

 <nav class="navbar navbar-default" role="tab">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-2">
            <ul class="nav navbar-nav" id="tabHeader">
                <li>
                    <a class="dropdown-toggle align-center tabColor" id="divFavItemsTab" data-toggle onclick="ShowFavouriteNew();">
                        <asp:Literal ID="literalMyFav" runat="server" Text="<%$ Resources:Resource,lblMyFavorites %>"></asp:Literal>
                    </a>
                </li>
                <li>
                    <a class="dropdown-toggle align-center tabColor" id="divMyItemsListTab" datatoggle onclick="ShowMyItemsNew();">
                        <asp:Literal ID="literalCmpitems" runat="server" Text="<%$ Resources:Resource,lblCompanyItem %>"></asp:Literal>
                    </a>
                </li>
                <li>
                    <a class="dropdown-toggle align-center tabColor" id="divPackageTab" onclick="ShowPackagesNew();">
                        <asp:Literal ID="ltrlCmpPackages" runat="server" Text="<%$ Resources:Resource,lblPackage %>"></asp:Literal>
                    </a>
                </li>
                <li>
                    <a class="dropdown-toggle align-center tabSelected" id="divOnlineTab" onclick="ShowOnlineNew();">
                        <asp:Literal ID="ltrlOnline" runat="server" Text="<%$ Resources:Resource,lblOnline %>"></asp:Literal>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

到目前为止一切正常，我可以看到点击我的li项目。但这只发生在第一次点击时。如果我再次单击该按钮以使这些li"项目折叠，则不会。我发现在第二次点击后没有删除第一次点击后，上面看到的in类会被追加。所以我做的是我运行这样的jQuery：

$("#btnBsTab").click(function () {
    if ($("#bs-example-navbar-collapse-2").hasClass("in")) {
        $("#bs-example-navbar-collapse-2").removeClass("in");
    } else {
        $("#bs-example-navbar-collapse-2").addClass("in").css({height:'auto !important'});
    }
  });
});

此处btnBsTab是按钮ID，我从代码中删除了data-target属性。现在这对我来说很好，但我不想这样做，因为bootstrap本身提供了“数据目标”功能，实际上每次点击都会处理div id。

我正在使用jquery-1.9.0和bootstrap 3.0.0 css以及bootstrap.js。

单击时，Bootstrap切换按钮仅工作一次

0 个答案: