Question

使用bootstrap下拉列表时遇到问题。这在Chrome和FF中运行良好，但在边缘显示问题。当我单击主菜单中的子菜单选项时，页面会重新加载和相应的页面加载。但是如果我根本没有移动光标，则单击子菜单时，在页面加载后，下拉菜单保持打开状态直到我移动光标。我已经尝试了几乎所有的解决方案，

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="top-nav" id="custom-top-nav">
  <ul class="nav nav-tabs">
    <li role="presentation">
      <a href="#/home" title="Dashboard" id="home" class="top-link" data-target="home">
        <span class="menu-item-parent">Home</span>
      </a>
    </li>
    <li role="presentation" class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="dropdownBtn" data-target="performance"> A</a>
      <ul class="dropdown-menu">
        <li>
          <a href="#/performance" id="performance" data-target="">
            <span class="menu-item-parent"> B</span>
          </a>
        </li>
        <li ng-show=!prodToggleEnabled>
          <a href="#/productivity" id="productivity" data-target="productivity">
            <span class="menu-item-parent">C</span>
          </a>
        </li>
        <li ng-show=salesFunnelToggleEnabled>
          <a href="#/sales" id="sales" data-target="sales">
            <span class="menu-item-parent">D</span>
          </a>
        </li>
        <li ng-show=salesFunnelToggleEnabled>
          <a href="#/funnel" id="funnel" data-target="funnel">
            <span class="menu-item-parent">E</span>
          </a>
        </li>
        <li ng-show=!modelToggleEnabled role="separator" class="divider"></li>
        <li ng-show=!modelToggleEnabled>
          <a href="#/models/contact_reason" data-target="models/contact_reason">
            <span class="menu-item-parent">F</span>
          </a>
        </li>
        <li role="separator" class="divider"></li>
        <li>
          <a href="#/agents" id="agents" data-target="agents">
            <span class="menu-item-parent">G</span>
          </a>
        </li>
      </ul>
    </li>
  
  </ul>
</div>

但真的没有得到它背后的原因。请告诉我应该做些什么。

Answer 1

你错过了

<div class="dropdown"> around the <ul class="dropdown-menu">

此外，您错过了data-toggle="dropdown"元素（未明确记录，但后跟所有示例并与http://getbootstrap.com/javascript/#callout-dropdowns-data-required中的警告相关）

如果光标没有从悬停状态Edge

1 个答案: