Question

我正在使用Bootstrap，我正在尝试创建一个下拉菜单，当我点击其中一个导航按钮时出现。

这是我的脚本被引用的方式：

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.icon-large.css" rel="stylesheet">
<link href="css/superslides.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/home.css" rel="stylesheet">
<script src="js/jquery1.9.js"></script>
<script charset="utf-8" type="text/javascript" src="carousel/dist/jquery.superslides.js"/>
<script type="text/javascript">
    $('#slides').superslides();
    $('.dropdown-toggle').dropdown()
</script>
<script src="js/bootstrap.min.js"></script>

这是我的html设置：

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLUB</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">SOCIALS</a></li>
        <li><a href="#">TOURNAMENTS</a></li>
    </ul>
</li>

目前，始终会显示下拉菜单，而不是仅在点击“CLUB”链接时显示。控制台没有返回任何错误FYI。

Answer 1

确保您没有任何其他JS / jQuery库触发下拉列表的点击。

例如，需要在Bootstrap Dropdown上禁用FastClick，因此您可能会执行类似于执行“合成点击”的操作;

https://github.com/ftlabs/fastclick

Answer 2

它不起作用，因为您已使用列表标签对其进行了设置，将代码更改为此。使用复制并粘贴以下代码。您也可以在顶部的样式中更改文本颜色。

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Dropdown</title>
    
    <style type="text/css">
      .drop {
      
        color: black;
      
      }
      
      a:hover {
      
        color: black;  
      
      }

    </style>
  </head>
  <body>
  <a class="nav-item dropdown drop">
        <a class="nav-link dropdown-toggle drop" href="#" id="navbarDropdown"                     role="button" data-toggle="dropdown" aria-haspopup="true" aria-                         expanded="false">
          CLUB
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">GALLERY</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">SOCIALS</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">TOURNAMENTS</a>
        </div>
   </a>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

永久显示Bootstrap Dropdown - 不是特定于按钮点击

2 个答案: