相关疑难解决方法(0)

我想让我的Bootstrap菜单在悬停时自动下拉,而不必单击菜单标题.我还想丢失菜单标题旁边的小箭头.

如何让twitter bootstrap的菜单下拉列表悬停而不是点击？

首先,我知道这些帖子:
在悬停时激活bootstrap下拉菜单
使用Hover
进行Bootstrap Dropdown 如何在悬停时使Twitter引导菜单下拉而不是单击
And others,但仍然没有找到正确的解决方案,这是我到目前为止所做的.
首先我使用angular-bootstrap下拉指令中的is-open属性,如下所示:

<span class="dropdown" dropdown is-open="status.isopen">
  <a
    href
    class="dropdown-toggle"
    ng-mouseenter="status.isopen = true"
    ng-mouseleave="status.isopen = false"
  >
    hover me for a dropdown with angular-bootstrap
  </a>
  <ul
    class="dropdown-menu"
  >
    <li ng-repeat="choice in items">
      <a href>{{choice}}</a>
    </li>
  </ul>
</span>

似乎工作但出现了2个错误:

• 第一个是当点击下拉切换元素时,下拉菜单再次点击不再将它带回来你必须鼠标左键然后鼠标进入下拉菜单以获得下拉菜单.
• 第二个是css/html问题.

通常,下拉列表的常规css解决方案如下:

<a class="css-dropdown">
  hover here with css.
  <div class="css-dropdown-menu">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
  </div>
</a>

请注意,下拉菜单现在位于下拉切换元素内,这意味着当鼠标从下拉切换到下拉菜单时,它从父级移动到子级,所以基本上我们仍然悬停在下拉式切换上,因为我们是在它的孩子,这意味着下拉菜单仍然可见,另一方面,引导下拉菜单与点击事件一起使用,因此不需要下拉菜单作为下拉切换的子项,但现在当有人想要鼠标离开下拉菜单时,将行为更改为mouseenter/hover,下拉菜单消失,因此我们无法再访问下拉菜单元素,这在此plunker中可见

为了修复第一个错误,我刚删除了dropdown指令,然后用这样的ng-class指令替换了is-open.
改变这个:

<span class="dropdown" dropdown is-open="status.isopen">

对此:

<span …

我正在使用bootstrap 3用于桌面,并且只使用导航而不是导航栏.
如何在悬停上下拉并点击？

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>