Question

我使用joomla 3.3.3和boostrap 3.2.0

我编辑了joomla菜单模块源，以包含引导类以创建下拉菜单。

浏览器呈现下拉列表：

<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>

导航li的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;
}

第一个导航栏上的显示：阻止＆gt; li规则似乎因某种原因而被禁用。任何帮助将不胜感激。

Answer 1

首先你不应该编辑菜单模块，你应该为它创建一个alternative module layout，然后可以从（未被黑）菜单模块中选择。

您所看到的是与Mootools的冲突，与Bootstrap结合使用时不支持使用它。 jQuery和Mootools（特别是mootools-more.js）是冲突的，因为Bootstrap依赖于jQuery，所以你也不应该加载Mootools。

P.S。现在有一个joomla.stackexchange.com :)

下拉菜单父级由joomla中的bootstrap隐藏

1 个答案: