Question

我的下拉菜单有点问题。我无法让它发挥作用。我已经搜索了几个小时但仍然没有。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-center">
        <li> <a href="#page-top" class="hidden-xs page-scroll" id="logowts" style="display:none;"><img src="img/wts-logo.png" style="width:40px; height:40px;" alt="World Travel Show" /></a> </li>
        <li aria-haspopup="true" aria-expanded="false" class="dropdown" ><a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a><span class="caret"></span>
          <ul class="dropdown-menu">
            <li><a href="">O TARGACH</a></li>
            <li><a href="">SALONY</a></li>
            <li><a href=""></a>DOJAZD</li>
            <li><a href=""></a>DLA MEDIÓW</li>
          </ul>
        </li>
        <li> <a class="page-scroll" href="podroznicy.html">PODRÓŻNICY</a> </li>
        <li> <a class="page-scroll" href="#adoba">ATRAKCJE</a> </li>
        <li> <a class="page-scroll" href="#harmonogram">HARMONOGRAM</a> </li>
        <li> <a class="page-scroll" href="#dojazd">DOJAZD</a> </li>
        <li> <a class="page-scroll" href="#salony">SALONY</a> </li>
        <li> <a class="page-scroll" href="#dla_wystawcow">O TARGACH</a> </li>
        <li> <a class="page-scroll" href="#wystawcy">WYSTAWCY</a> </li>
        <li> <a class="" href="http://targi.kadryturystyki.pl/" target="_blank">SZKOLENIA</a> </li>
        <li> <a href="media.html" target="_blank">DLA MEDIÓW</a> </li>
       
        <li> <a class="page-scroll" href="#contact">KONTAKT</a> </li>
        <li> <a class="page-scroll hidden-xs" href="#contact" id="logopwe" style="display:none;"><img src="img/pwe-logo.png" alt="Ptak Warsaw Expo" style="height:40px; width:40px;" /></a> </li>
      </ul>
    </div>

＆＃13;

CodePen

Answer 1

<span class="caret"></span>必须位于下拉列<a>...</a>标记内更改

<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a> <span class="caret"></span>

以

<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#">WORLD TRAVEL SHOW <span class="caret"></span></a>

<强> Bootply
http://www.bootply.com/wS18cO4pfA

Answer 2

以下是我使用Bootstrap下拉列表的方法，它运行正常：

<div class="btn-group">
   <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button</button>
   <ul class="dropdown-menu">
      <div>Something</div>
   </ul>
</div>

祝你好运！

Bootstrap 3下拉菜单不起作用

2 个答案: