javascript - 鼠标悬停时如何打开菜单折叠?
问题描述
我有一个带有 Drupal 8 和 Bootstrap 3.3.7 的站点
我的网站上有一个菜单折叠,我希望它在桌面上打开以将鼠标悬停。
这是我的 JS 代码,但它不起作用:
$(".navbar-toggle-first").mouseenter(function () {
$(".navbar-collapse-first").fadeIn();
});
$(".navbar-toggle-first").mouseleave(function(){
$(".navbar-collapse-first").fadeOut();
});
这是我的页面的 HTML 代码:
<button type="button" class="navbar-toggle-first collapsed" data-toggle="collapse" data-target="#navbar-collapse-first" aria-expanded="false">
<div class="icon-navbar-first">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-th-list" data-fa-transform="shrink-8"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-first-alert icon-navbar-first-alert-disable">
<span class="fa-layers fa-3x">
<i class="fas fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-th-list fa-inverse" data-fa-transform="shrink-8"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times fa-inverse" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
</button>
和
{# Navigation (collapsible first) #}
{% if page.navigation_collapsible_first %}
<div id="navbar-collapse-first" class="navbar-collapse-first collapse width navbar-collapse-first-fixed-top">
{{ page.navigation_collapsible_first }}
</div>
{% endif %}
解决方案
您的导航结构如下所示:
<ul>
<li>About</li>
<li>Products
<ul>
<li>Booster</li>
....
</ul>
</li>
</ul>
然后您可以使用 CSS(而不是 javascript)来控制子导航的隐藏和显示。这可以通过 :hover 伪选择器来完成。
该方法是最初隐藏子菜单
ul ul { 显示:无 }
当用户将鼠标悬停在主菜单项上时,使用 :hover 选择器显示子菜单
li:hover ul {显示:块}