一次只打开一个引导下拉菜单

Posted

技术标签:

【中文标题】一次只打开一个引导下拉菜单【英文标题】：Only one bootstrap dropdown menu open at a time 【发布时间】：2017-01-10 17:46:42 【问题描述】：

我有一个引导导航栏，下拉菜单在悬停时打开。问题是，当我单击一个链接打开菜单然后将鼠标悬停到另一个链接时，最初的链接保持打开状态。我需要它，以便一次只能打开一个下拉菜单。我不介意js解决方案。

这是一个靴子：http://www.bootply.com/TcskjKOWfA

/* CSS used here will be applied after bootstrap.css */

#main_navbar .navbar-nav 
  margin: 0 auto;
  display: table;
  table-layout: auto;
  float: none;
  width: 100%;

#main_navbar .navbar-nav > li 
  display: table-cell;
  float: none;
  text-align: center;

#main_navbar .dropdown-toggle:active,
#main_navbar .open .dropdown-toggle,
#main_navbar .dropdown-toggle:hover,
#main_navbar .open .dropdown-toggle 
  background-color: #fff;
  color: #000 !important;
  font-weight: 600;
  border-top: 1px solid #ccc !important;
  border-right: 1px solid #ccc !important;
  border-left: 1px solid #ccc !important;
  border-bottom: 2px solid #fff !important;
  z-index: 1005;

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover 
  background-color: #fff !important;
  border-color: #ccc;

.nav .dropdown-menu 
  padding: 20px;
  top: 98%;

.dropdown-menu 
  min-width: 230px;

.dropdown-header 
  padding-left: 0 !important;
  color: #000;
  font-weight: 600;
  font-size: 14px;

li + .dropdown-header 
  padding-top: 20px;

.dropdown-menu.columns-2 
  min-width: 400px;

.dropdown-menu.columns-4 
  min-width: 766px;

.multi-column-dropdown 
  list-style: none;
  padding-left: 15px;

.multi-column-dropdown li a 
  display: block;
  clear: both;
  line-height: 1.7;
  color: #000;
  white-space: normal;
  font-weight: 400;
  font-size: 15px;

.dropdown-menu.multi-column 
  padding-bottom: 20px;

#main_navbar .multi-column-dropdown a:hover 
  opacity: 0.7;

#main_navbar .dropdown:hover .dropdown-menu 
  display: block;
  box-shadow: none;

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

<div id="main_navbar">
  <ul class="nav navbar-nav">

    <!-- Brands Dropdown -->

    <li class="dropdown"><a href="/brands.html" id="header-brands" class="dropdown-toggle" data-toggle="dropdown">BRANDS</a>
      <ul class="dropdown-menu multi-column columns-4" role="menu">
        <div class="row">
          <div class="col-sm-3">
            <ul class="multi-column-dropdown">
              <li class="dropdown-header">A</li>
              <li><a title="A. Lange &amp; Sohne" href="/brand/a-lange-sohne.html">A. Lange &amp; Sohne</a>
              </li>
              <li><a title="Audemars Piguet" href="/brand/audemars-piguet.html">Audemars Piguet</a>
              </li>
              <li class="dropdown-header">B</li>
              <li><a title="Baume &amp; Mercier" href="/brand/baume-mercier.html">Baume &amp; Mercier</a>
              </li>
              <li><a title="Bedat" href="/items.php?brand=74">Bedat</a>
              </li>
              <li><a title="Bell &amp; Ross" href="/brand/bellross.html">Bell &amp; Ross</a>
              </li>
              <li><a title="Blancpain" href="/brand/blancpain.html">Blancpain</a>
              </li>
              <li><a title="Breguet" href="/brand/breguet.html">Breguet</a>
              </li>
              <li><a title="Breitling" href="/brand/breitling.html">Breitling</a>
              </li>
              <li><a title="Bremont" href="/items.php?brand=115">Bremont</a>
              </li>
              <li><a title="Bulgari" href="/brand/bulgari.html">Bulgari</a>
              </li>
              <li class="dropdown-header">C</li>
              <li><a title="Cartier" href="/brand/cartier.html">Cartier</a>
              </li>
              <li><a title="Chanel" href="/brand/chanel-watches.html">Chanel</a>
              </li>
              <li><a title="Chopard" href="/brand/chopard.html">Chopard</a>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul class="multi-column-dropdown">
              <li class="dropdown-header">E</li>
              <li><a title="Ebel" href="/brand/ebel.html">Ebel</a>
              </li>
              <li class="dropdown-header">G</li>
              <li><a title="Girard Perregaux" href="/brand/girard-perregaux.html">Girard Perregaux</a>
              </li>
              <li><a title="Glashutte Original" href="/brand/glashutte-original.html">Glashutte Original</a>
              </li>
              <li class="dropdown-header">H</li>
              <li><a title="Harry Winston" href="/brand/harry-winston.html">Harry Winston</a>
              </li>
              <li><a title="Hermes" href="/brand/hermes.html">Hermes</a>
              </li>
              <li><a title="Hublot" href="/brand/hublot.html">Hublot</a>
              </li>
              <li class="dropdown-header">I</li>
              <li><a title="IWC" href="/brand/iwc.html">IWC</a>
              </li>
              <li class="dropdown-header">J</li>
              <li><a title="Jaeger LeCoultre" href="/brand/jaeger-lecoultre.html">Jaeger LeCoultre</a>
              </li>
              <li><a title="Jaquet Droz" href="/brand/jaquet-droz.html">Jaquet Droz</a>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul class="multi-column-dropdown">
              <li class="dropdown-header">L</li>
              <li><a title="Longines" href="/brand/longines.html">Longines</a>
              </li>
              <li class="dropdown-header">M</li>
              <li><a title="Maurice Lacroix" href="/brand/maurice-lacroix.html">Maurice Lacroix</a>
              </li>
              <li><a title="Michele" href="/brand/michele.html">Michele</a>
              </li>
              <li><a title="Montblanc" href="/brand/montblanc-watches.html">Montblanc</a>
              </li>
              <li class="dropdown-header">O</li>
              <li><a title="Omega" href="/brand/omega.html">Omega</a>
              </li>
              <li><a title="Orbita Watch Winders &amp; Cases" href="/brand/orbita-winders.html">Orbita Watch Winders &amp; Cases</a>
              </li>
              <li><a title="Oris" href="/brand/oris.html">Oris</a>
              </li>
              <li class="dropdown-header">P</li>
              <li><a title="Panerai" href="/items.php?brand=85">Panerai</a>
              </li>
              <li><a title="Parmigiani" href="/items.php?brand=118">Parmigiani</a>
              </li>
              <li><a title="Patek Philippe" href="/items.php?brand=68">Patek Philippe</a>
              </li>
              <li><a title="Perrelet" href="/items.php?brand=106">Perrelet</a>
              </li>
              <li><a title="Piaget" href="/items.php?brand=69">Piaget</a>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul class="multi-column-dropdown">
              <li class="dropdown-header">R</li>
              <li><a title="Raymond Weil" href="/brand/raymond-weil.html">Raymond Weil</a>
              </li>
              <li><a title="Rolex" href="/brand/rolex.html">Rolex</a>
              </li>
              <li class="dropdown-header">T</li>
              <li><a title="Tag Heuer" href="/brand/Tag-Heuer.html">Tag Heuer</a>
              </li>
              <li class="dropdown-header">U</li>
              <li><a title="Ulysse Nardin" href="/brand/ulysse-nardin.html">Ulysse Nardin</a>
              </li>
              <li class="dropdown-header">V</li>
              <li><a title="Vacheron Constantin" href="/brand/vacheron-constantin.html">Vacheron Constantin</a>
              </li>
              <li class="dropdown-header">Z</li>
              <li><a title="Zenith" href="/brand/zenith.html">Zenith</a>
              </li>
            </ul>
          </div>
        </div>
      </ul>
    </li>

    <!-- Mens Watches Dropdown -->

    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">MEN'S WATCHES</a>
      <ul class="dropdown-menu multi-column columns-4" role="menu">
        <div class="row">
          <div class="col-sm-4">
            <ul class="multi-column-dropdown">
              <li class="dropdown-header">SHOP ALL</li>
              <li><a href="/luxury-watches-for-men.html">All men's watches</a>
              </li>
              <li class="dropdown-header">SHOP BY PRICE</li>
              <li><a href="/items.php?price_from=0&amp;price_to=2000&amp;size=1,18">under $2,000</a>
              </li>
              <li><a href="/items.php?price_from=2000&amp;price_to=5000&amp;size=1,18">$2,000 - $5,000</a>
              </li>
              <li><a href="/items.php?price_from=5001&amp;price_to=8000&amp;size=1,18">$5,001 - $8,000</a>
              </li>
              <li><a href="/items.php?price_from=8001&amp;price_to=12000&amp;size=1,18">$8,001 - $12,000</a>
              </li>
              <li><a href="/items.php?price_from=12001&amp;size=1,18">$12,001 and up</a>
              </li>
            </ul>
          </div>
          <div class="col-sm-4">
            <ul class="multi-column-dropdown">
              <li class="dropdown-header">SHOP MEN'S SALE</li>
              <li><a href="/luxury-watches-for-men.html">All men's sale</a>
              </li>
              <li class="dropdown-header">SHOP SALE BY PRICE</li>
              <li><a href="/items.php?price_from=0&amp;price_to=2000&amp;size=1,18&amp;special=1">under $2,000</a>
              </li>
              <li><a href="/items.php?price_from=2000&amp;price_to=5000&amp;size=1,18&amp;special=1">$2,000 - $5,000</a>
              </li>
              <li><a href="/items.php?price_from=5001&amp;price_to=8000&amp;size=1,18&amp;special=1">$5,001 - $8,000</a>
              </li>
              <li><a href="/items.php?price_from=8001&amp;price_to=12000&amp;size=1,18&amp;special=1">$8,001 - $12,000</a>
              </li>
              <li><a href="/items.php?price_from=12001&amp;size=1,18&amp;special=1">$12,001 and up</a>
              </li>
            </ul>
          </div>
          <div class="col-sm-4">
            <ul class="multi-column-dropdown">
              <li class="dropdown-header">SHOP BY MOVEMENT</li>
              <li><a href="/Mens-Quartz-Watches.html">Quartz</a>
              </li>
              <li><a href="/Mens-Automatic-Watches.html">Automatic</a>
              </li>
              <li><a href="/Mens-Manual-Wind-Watches.html">Manual Wind</a>
              </li>
            </ul>
          </div>

        </div>
      </ul>
    </li>

    <!-- Ladies Watches Dropdown -->


    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">WOMEN'S WATCHES</a>
      <ul class="dropdown-menu multi-column columns-4" role="menu">
        <div class="row">
          <div class="col-sm-3">
            <ul class="multi-column-dropdown">
              <li class="dropdown-header">SHOP ALL</li>
              <li><a href="/luxury-watches-for-women.html">All women's watches</a>
              </li>
              <li class="dropdown-header">SHOP BY SALE</li>
              <li><a href="/womens-watches-on-sale.html">Women's watches on sale</a>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul class="multi-column-dropdown">
              <li class="dropdown-header">SHOP BY PRICE</li>
              <li><a href="/items.php?price_from=0&amp;price_to=2000&amp;size=2">under $2,000</a>
              </li>
              <li><a href="/items.php?price_from=2000&amp;price_to=5000&amp;size=2">$2,000 - $5,000</a>
              </li>
              <li><a href="/items.php?price_from=5001&amp;price_to=8000&amp;size=2">$5,001 - $8,000</a>
              </li>
              <li><a href="/items.php?price_from=8001&amp;price_to=12000&amp;size=2">$8,001 - $12,000</a>
              </li>
              <li><a href="/items.php?price_from=12001=8000&amp;size=2">$12,001 and up</a>
              </li>
            </ul>
          </div>
        </div>
      </ul>
    </li>
    <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">POLICIES</a>
      <ul class="dropdown-menu multi-column" role="menu" style="padding-top:20px;">
        <div class="row">
          <div class="col-sm-12">
            <ul class="multi-column-dropdown">
              <li><a href="/policies/returns">Returns and Exchanges</a>
              </li>
              <li><a href="/policies/payment-shipping">Payment and Shipping</a>
              </li>
              <li><a href="/policies/warranty">Warranty and Repair</a>
              </li>
              <li><a href="/policies/international">International Ordering</a>
              </li>
              <li><a href="/policies/about">About</a>
              </li>
              <li><a href="/policies/contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </ul>
    </li>
    <li><a href="/trade_in.php">WATCH TRADE-IN</a>
    </li>


    <!-- Policies Dropdown -->

    <li><a href="/preowned">PREOWNED</a>
    </li>
    <li><a href="/search.php">ADVANCED SEARCH</a>
    </li>




  </ul>
</div>

【问题讨论】：

在您提供的代码 sn-p 中，悬停时只有一个下拉菜单打开，其他下拉菜单关闭。这不是你想要的吗？ @ElSam 当您悬停而不单击时，它们会在您传递到下一个时关闭。但是，一旦您单击其中一个并打开菜单，然后尝试将鼠标悬停在另一个项目上，原来打开的菜单就会保持打开状态。 @RachelS 在 Bootply 中很难看到这一点。当您单击任何内容时，它会导航到外部链接。 点击男士手表。下拉菜单打开。打开时，将鼠标悬停在女士手表上。男士手表下拉菜单仍然保持打开状态，而女士手表则覆盖它。 【参考方案1】：

你能试试这个吗？ 我删除了&lt;li&gt; 标签中的&lt;a href=""&gt; 

<div id="main_navbar">
<ul class="nav navbar-nav">

    <!-- Brands Dropdown -->

    <li class="dropdown">
        <a href="/brands.html" id="header-brands">BRANDS</a>
        <ul class="dropdown-menu multi-column columns-4" role="menu">
            <div class="row">
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li class="dropdown-header">A</li>
                        <li><a title="A. Lange &amp; Sohne" href="/brand/a-lange-sohne.html">A. Lange &amp; Sohne</a></li>
                        <li><a title="Audemars Piguet" href="/brand/audemars-piguet.html">Audemars Piguet</a></li>
                        <li class="dropdown-header">B</li>
                        <li><a title="Baume &amp; Mercier" href="/brand/baume-mercier.html">Baume &amp; Mercier</a></li>
                        <li><a title="Bedat" href="/items.php?brand=74">Bedat</a></li>
                        <li><a title="Bell &amp; Ross" href="/brand/bellross.html">Bell &amp; Ross</a></li>
                        <li><a title="Blancpain" href="/brand/blancpain.html">Blancpain</a></li>
                        <li><a title="Breguet" href="/brand/breguet.html">Breguet</a></li>
                        <li><a title="Breitling" href="/brand/breitling.html">Breitling</a></li>
                        <li><a title="Bremont" href="/items.php?brand=115">Bremont</a></li>
                        <li><a title="Bulgari" href="/brand/bulgari.html">Bulgari</a></li>
                        <li class="dropdown-header">C</li>
                        <li><a title="Cartier" href="/brand/cartier.html">Cartier</a></li>
                        <li><a title="Chanel" href="/brand/chanel-watches.html">Chanel</a></li>
                        <li><a title="Chopard" href="/brand/chopard.html">Chopard</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li class="dropdown-header">E</li>
                        <li><a title="Ebel" href="/brand/ebel.html">Ebel</a></li>
                        <li class="dropdown-header">G</li>
                        <li><a title="Girard Perregaux" href="/brand/girard-perregaux.html">Girard Perregaux</a></li>
                        <li><a title="Glashutte Original" href="/brand/glashutte-original.html">Glashutte Original</a></li>
                        <li class="dropdown-header">H</li>
                        <li><a title="Harry Winston" href="/brand/harry-winston.html">Harry Winston</a></li>
                        <li><a title="Hermes" href="/brand/hermes.html">Hermes</a></li>
                        <li><a title="Hublot" href="/brand/hublot.html">Hublot</a></li>
                        <li class="dropdown-header">I</li>
                        <li><a title="IWC" href="/brand/iwc.html">IWC</a></li>
                        <li class="dropdown-header">J</li>
                        <li><a title="Jaeger LeCoultre" href="/brand/jaeger-lecoultre.html">Jaeger LeCoultre</a></li>
                        <li><a title="Jaquet Droz" href="/brand/jaquet-droz.html">Jaquet Droz</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li class="dropdown-header">L</li>
                        <li><a title="Longines" href="/brand/longines.html">Longines</a></li>
                        <li class="dropdown-header">M</li>
                        <li><a title="Maurice Lacroix" href="/brand/maurice-lacroix.html">Maurice Lacroix</a></li>
                        <li><a title="Michele" href="/brand/michele.html">Michele</a></li>
                        <li><a title="Montblanc" href="/brand/montblanc-watches.html">Montblanc</a></li>
                        <li class="dropdown-header">O</li>
                        <li><a title="Omega" href="/brand/omega.html">Omega</a></li>
                        <li><a title="Orbita Watch Winders &amp; Cases" href="/brand/orbita-winders.html">Orbita Watch Winders &amp; Cases</a></li>
                        <li><a title="Oris" href="/brand/oris.html">Oris</a></li>
                        <li class="dropdown-header">P</li>
                        <li><a title="Panerai" href="/items.php?brand=85">Panerai</a></li>
                        <li><a title="Parmigiani" href="/items.php?brand=118">Parmigiani</a></li>
                        <li><a title="Patek Philippe" href="/items.php?brand=68">Patek Philippe</a></li>
                        <li><a title="Perrelet" href="/items.php?brand=106">Perrelet</a></li>
                        <li><a title="Piaget" href="/items.php?brand=69">Piaget</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li class="dropdown-header">R</li>
                        <li><a title="Raymond Weil" href="/brand/raymond-weil.html">Raymond Weil</a></li>
                        <li><a title="Rolex" href="/brand/rolex.html">Rolex</a></li>
                        <li class="dropdown-header">T</li>
                        <li><a title="Tag Heuer" href="/brand/Tag-Heuer.html">Tag Heuer</a></li>
                        <li class="dropdown-header">U</li>
                        <li><a title="Ulysse Nardin" href="/brand/ulysse-nardin.html">Ulysse Nardin</a></li>
                        <li class="dropdown-header">V</li>
                        <li><a title="Vacheron Constantin" href="/brand/vacheron-constantin.html">Vacheron Constantin</a></li>
                        <li class="dropdown-header">Z</li>
                        <li><a title="Zenith" href="/brand/zenith.html">Zenith</a></li>
                    </ul>
                </div>
            </div>
        </ul>
    </li>

    <!-- Mens Watches Dropdown -->

    <li class="dropdown">
        <a>MEN'S WATCHES</a>
        <ul class="dropdown-menu multi-column columns-4" role="menu">
            <div class="row">
                <div class="col-sm-4">
                    <ul class="multi-column-dropdown">
                        <li class="dropdown-header">SHOP ALL</li>
                        <li><a href="/luxury-watches-for-men.html">All men's watches</a></li>
                        <li class="dropdown-header">SHOP BY PRICE</li>
                        <li><a href="/items.php?price_from=0&amp;price_to=2000&amp;size=1,18">under $2,000</a></li>
                        <li><a href="/items.php?price_from=2000&amp;price_to=5000&amp;size=1,18">$2,000 - $5,000</a></li>
                        <li><a href="/items.php?price_from=5001&amp;price_to=8000&amp;size=1,18">$5,001 - $8,000</a></li>
                        <li><a href="/items.php?price_from=8001&amp;price_to=12000&amp;size=1,18">$8,001 - $12,000</a></li>
                        <li><a href="/items.php?price_from=12001&amp;size=1,18">$12,001 and up</a></li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <ul class="multi-column-dropdown">
                        <li class="dropdown-header">SHOP MEN'S SALE</li>
                        <li><a href="/luxury-watches-for-men.html">All men's sale</a></li>
                        <li class="dropdown-header">SHOP SALE BY PRICE</li>
                        <li><a href="/items.php?price_from=0&amp;price_to=2000&amp;size=1,18&amp;special=1">under $2,000</a></li>
                        <li><a href="/items.php?price_from=2000&amp;price_to=5000&amp;size=1,18&amp;special=1">$2,000 - $5,000</a></li>
                        <li><a href="/items.php?price_from=5001&amp;price_to=8000&amp;size=1,18&amp;special=1">$5,001 - $8,000</a></li>
                        <li><a href="/items.php?price_from=8001&amp;price_to=12000&amp;size=1,18&amp;special=1">$8,001 - $12,000</a></li>
                        <li><a href="/items.php?price_from=12001&amp;size=1,18&amp;special=1">$12,001 and up</a></li>
                    </ul>
                </div>
                <div class="col-sm-4">
                    <ul class="multi-column-dropdown">
                        <li class="dropdown-header">SHOP BY MOVEMENT</li>
                        <li><a href="/Mens-Quartz-Watches.html">Quartz</a></li>
                        <li><a href="/Mens-Automatic-Watches.html">Automatic</a></li>
                        <li><a href="/Mens-Manual-Wind-Watches.html">Manual Wind</a></li>
                    </ul>
                </div>

            </div>
        </ul>
    </li>

    <!-- Ladies Watches Dropdown -->


    <li class="dropdown">
        <a>WOMEN'S WATCHES</a>
        <ul class="dropdown-menu multi-column columns-4" role="menu">
            <div class="row">
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li class="dropdown-header">SHOP ALL</li>
                        <li><a href="/luxury-watches-for-women.html">All women's watches</a></li>
                        <li class="dropdown-header">SHOP BY SALE</li>
                        <li><a href="/womens-watches-on-sale.html">Women's watches on sale</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li class="dropdown-header">SHOP BY PRICE</li>
                        <li><a href="/items.php?price_from=0&amp;price_to=2000&amp;size=2">under $2,000</a></li>
                        <li><a href="/items.php?price_from=2000&amp;price_to=5000&amp;size=2">$2,000 - $5,000</a></li>
                        <li><a href="/items.php?price_from=5001&amp;price_to=8000&amp;size=2">$5,001 - $8,000</a></li>
                        <li><a href="/items.php?price_from=8001&amp;price_to=12000&amp;size=2">$8,001 - $12,000</a></li>
                        <li><a href="/items.php?price_from=12001=8000&amp;size=2">$12,001 and up</a></li>
                    </ul>
                </div>
            </div>
        </ul>
    </li>
    <li class="dropdown">
        <a>POLICIES</a>
        <ul class="dropdown-menu multi-column" role="menu" style="padding-top:20px;">
            <div class="row">
                <div class="col-sm-12">
                    <ul class="multi-column-dropdown">
                        <li><a href="/policies/returns">Returns and Exchanges</a></li>
                        <li><a href="/policies/payment-shipping">Payment and Shipping</a></li>
                        <li><a href="/policies/warranty">Warranty and Repair</a></li>
                        <li><a href="/policies/international">International Ordering</a></li>
                        <li><a href="/policies/about">About</a></li>
                        <li><a href="/policies/contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </ul>
    </li>
    <li><a href="/trade_in.php">WATCH TRADE-IN</a></li>


    <!-- Policies Dropdown -->

    <li><a href="/preowned">PREOWNED</a></li>
    <li><a href="/search.php">ADVANCED SEARCH</a></li>




</ul>

【讨论】：

不过，我需要第一个“品牌”才能有链接。 我编辑了。我添加了 但我没有添加 class="dropdown-toggle" data-toggle="dropdown"。你能检查一下吗？ 这行得通。但它确实删除了我的很多样式；）删除这些属性是否有问题，或者它们只是在我的情况下额外的？ 嘿，我刚刚用“a”编辑了所有 .dropdown-toggle css 规则，它就像一个魅力。非常感谢您的帮助:)

以上是关于一次只打开一个引导下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章

引导下拉菜单在悬停时无法正常工作

单击下拉菜单按钮时引导打开链接

角度引导下拉菜单在左侧打开

在输入焦点上打开引导下拉菜单

从外部按钮打开引导下拉菜单

单击按钮时引导下拉菜单未打开