【问题标题】:Navbar Collapse not working on LoggedInTemplate导航栏折叠不适用于 LoggedInTemplate
【发布时间】:2016-05-28 22:37:35
【问题描述】:

我是 asp 新手,在使用 navbar collapse 时遇到问题。它在主页(AnonymousTemplate)中工作正常,但是当我登录时navbar collapsed 不工作(单击时不扩展)。

这是我的代码。我是新来的,所以请温柔一点。抱歉这个问题。

感谢任何愿意回答的人,我们将不胜感激。

In here it works.

In here it doesn't work.

这是我的脚本和 html。

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="js/jquery.isotope.min.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <script src="js/wow.min.js" type="text/javascript"></script>
      <nav class="navbar navbar-inverse" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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="Default.aspx"><asp:Image ID="Image1" runat="server" ImageUrl="~/images/service/logo.png"></asp:Image></a>
                </div>

               <div runat="server" class="collapse navbar-collapse navbar-right">
               <asp:LoginView ID="LoginView1" runat="server">
                    <AnonymousTemplate>
                    <ul class="nav navbar-nav">
                        <li><a href="Default.aspx">Home</a></li>
                       <li><a href="HowItWorks.aspx" >How it works?</a></li>
                        <li><a href="ContactUs.aspx">Contact us</a></li>                        
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About us <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="Secure/Default.aspx">Our Customers</a></li>
                                <li><a href="#">Our Truckers</a></li>
                                <li><a href="#">Our Mission</a></li>
                                <li><a href="#">Our Vision</a></li>
                            </ul>
                        </li>                
                    </ul> 
                    </AnonymousTemplate> 
                    <LoggedInTemplate>
                     <ul class="nav navbar-nav">
                        <li><a href="CustomerPage.aspx">My profile</a></li>
                        <li><a href="AdvancedBooking.aspx" >Advanced Booking</a></li>
                        <li><a href="#">Transaction History</a></li>                        
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About us<i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="Secure/Default.aspx">Our Customers</a></li>
                                <li><a href="#">Our Truckers</a></li>
                                <li><a href="#">Our Mission</a></li>
                                <li><a href="#">Our Vision</a></li>
                            </ul>
                        </li>
                        <li><asp:LoginStatus runat="server" /></li>                     
                    </ul>
                   </LoggedInTemplate>
                </asp:LoginView>
                </div>
           </div>
        </nav>

【问题讨论】:

    标签: javascript jquery asp.net twitter-bootstrap navbar


    【解决方案1】:

    尝试对另一个下拉菜单使用唯一的名称,并将其他数据切换链接到它,如下所示:

    <AnonymousTemplate>
                    <ul class="nav navbar-nav">
                        <li><a href="Default.aspx">Home</a></li>
                       <li><a href="HowItWorks.aspx" >How it works?</a></li>
                        <li><a href="ContactUs.aspx">Contact us</a></li>                        
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About us <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="Secure/Default.aspx">Our Customers</a></li>
                                <li><a href="#">Our Truckers</a></li>
                                <li><a href="#">Our Mission</a></li>
                                <li><a href="#">Our Vision</a></li>
                            </ul>
                        </li>                
                    </ul> 
                    </AnonymousTemplate> 
                    <LoggedInTemplate>
                     <ul class="nav navbar-nav">
                        <li><a href="CustomerPage.aspx">My profile</a></li>
                        <li><a href="AdvancedBooking.aspx" >Advanced Booking</a></li>
                        <li><a href="#">Transaction History</a></li>                        
                        <li class="dropdown2">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown2">About us<i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="Secure/Default.aspx">Our Customers</a></li>
                                <li><a href="#">Our Truckers</a></li>
                                <li><a href="#">Our Mission</a></li>
                                <li><a href="#">Our Vision</a></li>
                            </ul>
                        </li>
                        <li><asp:LoginStatus runat="server" /></li>                     
                    </ul>
                   </LoggedInTemplate>
    

    【讨论】:

    • 谢谢,下拉菜单工作正常。导航栏在折叠时无法展开以查看选项。我看不到我的“我的个人资料”、“提前预订”等。
    • 经过几次测试,我的折叠导航栏似乎只能在根目录中工作,而不是在另一个文件夹中。我的意思是它倒塌但没有扩大,有什么想法吗?
    【解决方案2】:

    好的,经过多次测试,我终于得到了答案。我改变了:

    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    

    到:

    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    

    在开头添加“/”以将其定位到根文件夹。抱歉,如果这是一个愚蠢的错误。我只在 asp.net 中开始了 1 个月。我正在为也将面临此问题的任何人发布此答案。

    -RobM

    【讨论】:

      猜你喜欢
      • 2020-03-12
      • 2018-04-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-06-06
      • 2020-11-24
      • 2015-08-21
      • 1970-01-01
      相关资源
      最近更新 更多