css - 下拉菜单父级被joomla中的bootstrap隐藏

Question

我使用 joomla 3.3.3 和 boostrap 3.2.0

我编辑了 joomla 菜单模块源代码以合并 Bootstrap 类来创建下拉菜单。

浏览器将下拉列表呈现为:

<ul class="nav navbar-nav">
::before
<li class="dropdown hovernav">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Sample Sites</a>
<ul class="dropdown-menu nav-child unstyled small" role="menu" aria-labelledby="dLabel">
<li class="dropdown hovernav">
<a data-toggle="dropdown" href="/joomla_3_3_3/index.php/sample-sites-2/getting-started">Getting Started</a>
</li>
</ul>
</li>
::after
</ul>

下拉菜单本身工作正常(包括添加了第三方悬停 js 和 css)。出于某种原因，如果我使用 href="#"作为下拉列表的父级(因此它不会链接到页面)，则包含父级下拉列表的 li 会被隐藏，如下所示:

<ul class="nav navbar-nav">
::before
<li class="dropdown hovernav" style="display: none;"> <===**** DISPLAY NONE GETS ADDED
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Sample Sites</a>
<ul class="dropdown-menu nav-child unstyled small" role="menu" aria-labelledby="dLabel">
<li class="dropdown hovernav">
<a data-toggle="dropdown" href="/joomla_3_3_3/index.php/sample-sites-2/getting-started">Getting Started</a>
</li>
</ul>
</li>
::after

</ul>

导航栏的 Bootstrap css 是:

.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

display: block on the first nav > li 规则似乎由于某种原因被禁用了。任何帮助将不胜感激。

Answer 1

首先你不应该编辑菜单模块，你应该创建一个 alternative module layout然后可以从(未破解的)菜单模块中选择它。

您看到的是与 Mootools 的冲突，不支持将其与 Bootstrap 结合使用。 jQuery 和 Mootools(特别是 mootools-more.js)存在冲突，并且由于 Bootstrap 依赖于 jQuery，因此您不应同时加载 Mootools。

附注有一个 joomla.stackexchange.com现在 :)