2015-09-29 48 views
0

新手到CSS/JS在這裏,所以請原諒我的無知。我有一個包含下拉菜單的菜單。我在使用Bootstrap.js(v3.3.5)和bootstrap.css(V3.2.0):Bootstrap下拉菜單不能連續工作

.. 
    <link href="/css/bootstrap.min.css" rel="stylesheet"/> 
    <!--<link href="/css/bootstrap-responsive.css" rel="stylesheet"/>--> 
    <!--<link href="http://bootswatch.com/united/bootstrap.min.css" rel="stylesheet"/>--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

    <script src="/js/bootstrap.js"></script> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 
<body> 
... 
<div class="navbar navbar-default navbar-fixed-top navbar-transparent" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <img style="width:150px;height:50px;" src="/images/trans.png" class="img-rounded"/> 
      </div> 
      <div> 
       <ul class="nav pull-right"> 
        <li sec:authorize="${!isAuthenticated()}"> 
         <div> 
          <span> Welcome Guest!</span> 
         </div> 
        </li> 
        <li sec:authorize="${isAuthenticated()}"> 
         <h4 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]] !</h4> 
        </li> 
       </ul> 
      </div> 
      <div id="navbar-main" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a class="fa fa-home" id="showHome1" href="/"> Home</a></li> 

        <li class="dropdown" sec:authorize="${isAuthenticated()}"> 
         <a href="" class="dropdown-toggle" data-toggle="dropdown"> Searches <b 
           class="caret"></b></a> 
         <ul class="dropdown-menu"> 

          <li sec:authorize="${isAuthenticated()}"> 
           <a class="fa fa-arrow-circle-o-up" id="upload" href="/upload"> Upload Data</a> 
          </li> 
          <li sec:authorize="${isAuthenticated()}"> 
           <a class="fa fa-arrow-circle-o-up" id="ach" href="/ach"> A Search</a> 
          </li> 

         </ul> 
        </li> 
        <li sec:authorize="${isAuthenticated()}"> 
         <a class="fa fa-search" id="searchT" href="/search"> Search </a> 
        </li> 
      </div> 
     </div> 
    </div> 
</div 

我登錄後,出現在我的下拉菜單。我點擊其中一個子項目,並且該頁面被渲染,並且URL被更改爲適當的URL。但是,當我點擊下拉菜單時,除非我點擊主頁或將URL更改回「/」,否則什麼都不會發生。

爲什麼下拉菜單不工作,除非網址是「/」?

回答

1

沒有分析你的代碼,但我建議你使用相同的引導版本(JS + CSS)。

+0

我切換到使用Bootstrap v3.3.5的一切,問題仍在發生。 – sonoerin

+1

我在Bootstrap v3.3.5中測試了你的代碼。所以,下拉菜單工作正常。你需要css&js都使用相同的Bootstrap版本。然後刪除您的瀏覽器緩存,然後檢查它。 – HarnishDesign

+0

我正在使用bootstrap.css v3.3.5和bootstrap.js v3.3.5,不僅菜單不能正常工作(仍然需要上面提到的「/」),但樣式似乎來了。 – sonoerin