2017-09-14 112 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

它现在工作正常。不知道如何关闭此线程。 –