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

时间:2018-06-20 19:34:20

标签: html twitter-bootstrap menu dropdown

在我的网站“ 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");
  };

1 个答案:

答案 0 :(得分:0)

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的话,请确保该按钮不正确。