html - 如何使用 Bootstrap 为 创建下拉列表

Question

我需要为一个 <li> 制作下拉菜单元素

<div class="head-nav">
                <span class="menu"></span>
                <ul class="cl-effect-15">
                    <li><a href="index.php" data-hover="HOME">HOME</a></li>
                    <li><a href="about.php">ABOUT</a></li>
                    <li><a href="contact.php" data-hover="CONTACT">CONTACT</a></li>
                    <li><a href="#" data-hover=" "> </a></li>
                    <li><a href="3" data-hover=" "> </a></li>
                    <li class="pull-right"><a href="#" data-hover="More option" tabindex="-1">More options</a>
                            <ul class="dropdown-menu">
                                <li><a href="#" data-hover=" ">one</a></li>
                                <li><a href="3" data-hover=" ">two</a></li>
                            </ul>
                    </li>
                    <li class="pull-right"><a href="logout.php" data-hover="logout">logout</a></li>
                    <div class="clearfix"> </div>
                </ul>
            </div>

但是子菜单打不开

使用 Bootstrap v3.1.1

注意 :即使在 jquery 之后添加也不行

Answer 1

你必须使用

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li class="divider"></li>
       <li><a href="#">Separated link</a></li>
       <li class="divider"></li>
       <li><a href="#">One more separated link</a></li>
    </ul>
</li>

在您的代码中，您错过了 li 标签的“下拉列表”类。对于正确的下拉菜单，您必须使用此语法:

<li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Item Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu">
<!--- Put your menu-item here -->
  </ul>
</li>

您可以引用 Bootstrap 文档 here

问题是由于标签 a 中缺少 data-toggle="dropdown"