鼠標懸停時如何打開菜單折疊？

Question

我有一個帶有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 %}

Answer 1

您的導航結構如下所示：

<ul>
    <li>About</li>
    <li>Products
        <ul>
            <li>Booster</li>
            ....
        </ul>
    </li>
</ul>

然后，您可以使用CSS（而不是JavaScript）來控制子導航的隱藏和顯示。 這可以通過：hover偽選擇器來完成。

方法是首先使用以下命令隱藏子菜單

ul ul {display：none}

當用戶將鼠標懸停在主菜單上時，使用：hover選擇器顯示子菜單

li：hover ul {display：block}