默认情况下如何使菜单打开？

Question

在我的网站“ Bootstrap”上，我创建了一个导航菜单。

菜单包括一个子菜单。如何默认打开菜单？

<ul class="navbar-nav">
  <li class="dropdown open">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fas fa-plus-circle fa-lg"></i> Besoin d'aide ?</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/guide" data-drupal-link-system-path="/guide"><i class="fas fa-paw fa-lg"></i> Suivez le guide</a>
      </li>
      <li>
        <a href="/demande" data-drupal-link-system-path="/demande"><i class="fas fa-ticket-alt fa-lg"></i> Consultez les demandes</a>
      </li>
      <li>
        <a href="/question" data-drupal-link-system-path="/question"><i class="fas fa-question fa-lg"></i> Foire aux question</a>
      </li>
    </ul>
  </li>
</ul>

我尝试使用JS，但是它不起作用，未添加该类：

  if ($("#navbar-collapse-first .views-manage-menu").length) {
      $("#navbar-collapse-first .views-manage-menu .dropdown").addClass("open");
  };

如果我更改类的名称，则会添加该类并起作用：

  if ($("#navbar-collapse-first .views-manage-menu").length) {
      $("#navbar-collapse-first .views-manage-menu .dropdown").addClass("xopen");
  };

Answer 1

js解决方案：

为您的ul提供一个ID（id =“ navigation”）， 在中写<script>location.hash = 'navigation';</script>

location.hash和location.href之间的区别在于，哈希不会重新加载网站。

在样式表中添加：

#navigation {
  /*...*/
  display: none;
}
#navigation:target {
  display: block;
  /*or whatever you want to display*/
}

我不知道没有js的自动解决方案，因此，如果您不想使用它，则必须自动打开它。您可以将非js代码放在

a#openNavigation {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  cursor: pointer;
}

a#openNavigation:active~ul#navigation,
ul#navigation:hover {
  display: block;
}

ul#navigation {
  position: fixed;
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
  background-color: #ddd;
  margin-top: 0;
}

<a id="openNavigation">open</a>
<ul id="navigation" class="menu menu--main nav navbar-nav">
  <li class="expanded dropdown active open">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><i class="fas fa-plus-circle fa-lg"></i> Besoin d'aide ?</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>
        <a href="/guide" data-drupal-link-system-path="/guide"><i class="fas fa-paw fa-lg"></i> Suivez le guide</a>
      </li>
      <li>
        <a href="/demande" data-drupal-link-system-path="/demande"><i class="fas fa-ticket-alt fa-lg"></i> Consultez les demandes</a>
      </li>
      <li>
        <a href="/question" data-drupal-link-system-path="/question"><i class="fas fa-question fa-lg"></i> Foire aux question</a>
      </li>
    </ul>
  </li>
</ul>

请确保上一个示例中的按钮位于ul的正下方，如果您单击链接后没有找到ul的话，请确保该按钮不正确。