0

我正在尝试将 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>

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

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

<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 脚本，事情就可以工作了。

4

1 回答 1

2

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

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

于 2013-08-28T17:41:52.747 回答