Twitter Bootstrap 菜单根据脚本的顺序表现不同

Question

我正在尝试使用 twitter 引导带和 asp.net 网络表单来创建响应式菜单。

    <link href="includes/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="includes/bootstrap-responsive.min.css" rel="Stylesheet" type="text/css" />
    <link href="includes/sitestyles.css" rel="Stylesheet" type="text/css" />
    <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"/>


    <script type="text/javascript">

           $(function () {
               //to fix collapse mode width issue
               $(".nav li,.nav li a,.nav li ul").removeAttr('style');

               //for dropdown menu
              $(".dropdown-menu").parent().removeClass().addClass('dropdown');
              $(".dropdown>a").removeClass().addClass('dropdown-toggle').append('<b class="caret"></b>').attr('data-toggle', 'dropdown');

               //remove default click redirect effect           
              $('.dropdown-toggle').attr('onclick', '').off('click');

           });
   </script>
   <script src="includes/bootstrap.min.js" type="text/javascript"></script>

我遇到了一个问题，如果我在我的内联 jquery 之后包含 bootstrap.min.js，菜单将删除下拉项，并且 jquery 似乎没有效果

但如果我在内联 jquery 之前包含 bootstrap.min.js。切换菜单按钮不会显示任何菜单项。以下是页面菜单部分的完整代码。

<div class="navbar">
        <div class="navbar-inner">
            <div class="container">
             <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
        <!-- Everything you want hidden at 940px or less, place within here -->
            <div class="nav-collapse collapse">
                <asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal"
                    CssClass="navbar navbar-fixed-top"
                    StaticMenuStyle-CssClass="nav"
                    StaticSelectedStyle-CssClass="active"
                    DynamicMenuStyle-CssClass="dropdown-menu">
                    <Items>
                        <asp:MenuItem Text="Home" ToolTip="Home"></asp:MenuItem>
                        <asp:MenuItem Text="Music" ToolTip="Music">
                            <asp:MenuItem Text="Classical" ToolTip="Classical" />
                            <asp:MenuItem Text="Rock" ToolTip="Rock" />
                            <asp:MenuItem Text="Jazz" ToolTip="Jazz" />
                        </asp:MenuItem>
                        <asp:MenuItem Text="Movies" ToolTip="Movies">
                            <asp:MenuItem Text="Action" ToolTip="Action" />
                            <asp:MenuItem Text="Drama" ToolTip="Drama" />
                            <asp:MenuItem Text="Musical" ToolTip="Musical" />
                        </asp:MenuItem>
                    </Items>
                </asp:Menu>
            </div>

            </div>
            </div>
        </div>

我试图重现示例 Responsive ASP.NET Menu Control With Twitter Bootstrap 中的内容。

谁能告诉我我应该按什么顺序包含我的脚本以及为什么这两种方式似乎都不起作用？我倾向于最后的内联 jquery 是正确的顺序，但无法弄清楚为什么切换菜单按钮不起作用。

编辑

我注意到，如果我执行我的文件内 javascript，则包含 bootstrap.min.js 文件，然后再包含我的文件内 java 脚本。

Answer 1

看起来你的问题是你的 jQuery <script> 标签。你不能自动关闭脚本标签<script />你必须有一个打开和关闭标签<script></script>

这可以解释为什么以下脚本不能正常工作，以及为什么在您添加两次自定义脚本时它可以正常工作。