Question

我正在尝试使用带有asp.net webforms的twitter启动带来创建响应式菜单。

    <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，菜单会删除drowdown项目并且jquery似乎没有效果 enter image description here

但是如果我在内联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>

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

Twitter Bootstrap菜单根据脚本的顺序采取不同的行动

1 个答案: