0

我正在使用 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”链接时出现。控制台没有返回任何错误仅供参考。

4

2 回答 2

0

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

例如，需要在 Bootstrap Dropdowns 上禁用 FastClick，因此您可能有类似的东西正在执行“合成点击”；

https://github.com/ftlabs/fastclick

于 2013-09-13T15:05:51.660 回答
0

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

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

于 2020-04-19T02:16:42.283 回答