2017-09-14 122 views
0

我無法點擊導航欄中可用的下拉選項。我使用引導類來創建導航菜單。嘗試了一些已經存在的例子,但仍未取得成功。下拉鍊接在導航欄中不起作用| bootstrap

<div class="navbar navbar-default navbar-fixed-top" style="background-color: #7910C6"> 
    <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="HomePage.aspx">Demo AUT</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="act"><a href="HomePage.aspx">Home</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Frames & Windows<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="Frames.aspx">Frames</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="Windows.aspx">Windows</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

請糾正我,如果我做錯了什麼。

+0

我嘗試了上述HTML和我能夠點擊的鏈接。對我來說沒問題。 –

+0

@PhaniKumarM問題是相同的代碼工作在除了一個的所有頁面,我無法弄清楚爲什麼發生這種事 –

+0

它開始工作的問題是與bootstrap.js文件 –

回答

0
<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Action <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 
+0

即使我已經嘗試過事情。問題是相同的代碼在所有頁面中工作,除了一個,我無法弄清楚爲什麼會發生這種事情。 –

0

請在下面添加自舉JS鏈接上面的標籤

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <title>Template</title> 
 

 
    <!-- Bootstrap core CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
    <!-- Custom styles for this template --> 
 
    </head> 
 

 
    <div class="navbar navbar-default navbar-fixed-top" style="background-color: #7910C6"> 
 
    <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="">Demo AUT</a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="act"><a href="HomePage.aspx">Home</a></li> 
 
      <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Frames & Windows<b class="caret"></b></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="Frames.aspx">Frames</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="Windows.aspx">Windows</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 

 
    <body> 
 
<h1 class="text-success"> testing</h1> 
 
\t \t \t <!-- ahiya bootstrap na code lakhjo --> 
 

 
    <!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

+0

它開始工作的問題是與bootstrap.js文件 –

+0

請運行代碼段...代碼是完美的工作 – Shiv

+0

它現在工作正常。不知道如何關閉此線程。 –