下拉链接在导航栏中不起作用 |引导程序答案

【问题标题】：Dropdown link not working in navigation bar | bootstrap下拉链接在导航栏中不起作用 |引导程序
【发布时间】：2017-09-14 14:06:27
【问题描述】：

我无法点击导航栏中的下拉选项。我正在使用引导类来创建导航菜单。尝试了一些谷歌已经存在但仍然没有成功的例子。

    <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>

如果我做错了什么，请纠正我。

【问题讨论】：

我在 HTML 上尝试过，我可以点击链接。对我来说没问题。
@PhaniKumarM 问题是相同的代码在除一个之外的所有页面中都在工作，我无法弄清楚为什么会发生这种情况
它开始工作了，问题出在 bootstrap.js 文件上

标签： html twitter-bootstrap navigationbar

【解决方案1】：

    <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>

【讨论】：

即使我也尝试过同样的事情。问题是相同的代码在除一个之外的所有页面中都在工作，我无法弄清楚为什么会发生这种情况。

【解决方案2】：

请在标签上方添加下面的引导 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>
			<!-- 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>

【讨论】：

它开始工作了，问题出在 bootstrap.js 文件上
请运行代码 sn-p ...代码完美运行
请验证我的答案。我会尝试解决关闭线程问题