Question

我遇到的问题是我在我的导航栏内添加了一个下拉菜单，用于我的使用bootstrap的网站，并且无法弄清楚为什么下拉列表会在网站打开时作为默认状态打开。我是bootstrap的新手。我附上了以下导航栏的代码：

<div class="navbar navbar-inverse">
            <ul class="nav nav-pills pull-right">
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle">
                        <span class="glyphicon glyphicon-list"></span>
                    </a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a>Add New Item</a></li>
                        <li><a>PC Requests</a></li>
                        <li><a>Kit Building</a></li>
                    </ul>
                </li>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Audit</a></li>
                <li><a href="#">Check-Out</a></li>
                <li><a href="#">Check-In</a></li>
            </ul>
            <h3 class="text-muted"><span class="glyphicon glyphicon-eye-open"></span>  Gentex Vision IVMS</h3>
</div>

非常感谢任何帮助！

Answer 1

重点是将open添加到<li class="dropdown">。

实际上，它看起来应该是这样的

<div class="navbar navbar-inverse">
        <ul class="nav nav-pills pull-right">
            <li class="dropdown open">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-list"></span>
                </a>
                <ul role="menu" class="dropdown-menu">
                    <li><a>Add New Item</a></li>
                    <li><a>PC Requests</a></li>
                    <li><a>Kit Building</a></li>
                </ul>
            </li>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Audit</a></li>
            <li><a href="#">Check-Out</a></li>
            <li><a href="#">Check-In</a></li>
        </ul>
        <h3 class="text-muted"><span class="glyphicon glyphicon-eye-open"></span>  Gentex Vision IVMS</h3>

然后它将默认打开

祝你好运

Answer 2

鉴于以下内容（从Bootstrap复制），第13行包含： class =“ dropdown-menu show” 。每次连续页面加载时都会显示下拉菜单。删除单词 show 可以防止这种情况。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
  <li class="nav-item dropdown show">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Dropdown</a>
    <div class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 39px, 0px);">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
</ul>

希望这会有所帮助。

Answer 3

aria-expanded =“ false” 重点是更改错误值

Bootstrap下拉菜单默认在网站加载时打开

3 个答案: