单击后的引导下拉菜单未显示下拉值答案

【问题标题】：Bootstrap dropdown menu after clicking is not showing dropdown values单击后的引导下拉菜单未显示下拉值
【发布时间】：2019-01-10 13:26:06
【问题描述】：

我已将引导菜单添加到我的网站。当我点击菜单下拉菜单项时没有显示。

<nav class="collapse navbar-collapse navbar-right" role="navigation">
<div class="main-menu">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
aria-haspopup="true" aria-expanded="false">Products
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>       
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>

以下是使用的脚本文件。

    <script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script>
    <script src="js/vendor/modernizr-2.6.2.min.js"></script><!-- jquery -->` 
   `<!-- owl carouserl js -->
    <script src="js/owl.carousel.min.js"></script><!-- bootstrap js -->
    <script src="js/bootstrap.min.js"></script>
    <!-- wow js --><script src="js/wow.min.js"></script><!-- slider js -->
    <script src="js/slider.js"></script>
    <script src="js/jquery.fancybox.js"></script><!-- template main js -->
    <script src="js/main.js"></script>
    <script>
    $(document).ready(function(){
    $('.dropdown-toggle').dropdown();
    });
    </script>

【问题讨论】：

我没有看到包含任何类型的引导 CSS 文件。这可能是问题的一部分。

标签： javascript html twitter-bootstrap drop-down-menu menu

【解决方案1】：

这三个脚本都需要添加到 html 文件中。

<link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：