Question

我在joomla中的下拉引导菜单有问题。看起来它一直都是外行的。我已经覆盖了mod_menu，所以＆lt; li>有一个class =＆＃34; nav-item＆＃34;我认为这可能是造成这个问题的原因。也许有人有类似问题，并知道如何解决这个问题。 enter image description here

红色元素只有在我关注“下拉菜单”时才能看到，但它们始终可见。

有一个html的菜单（对不起代码风格）

<nav class="navbar navbar-light navbar-expand-md" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav ml-auto" id="nav">
<li class="item-106 nav-item"><a href="#" class="nav-link">Main</a></li><li class="item-107 deeper parent nav-item"><a href="#" class="dropdown-toggle nav-link dropdown-toggle">Dropdown menu</a><ul class="nav navbar-nav ml-auto"><li class="item-108 nav-item"><a href="#" class="dropdown-item" style="color: red;">First</a>
</li><li class="item-115 nav-item"><a href="#" class="dropdown-item" style="color: red;">Second</a></li>
<li class="item-109 nav-item"><a href="#" class="dropdown-item" style="color: red;">Third</a></li>
<li class="item-110 nav-item"><a href="#" class="dropdown-item">Wywrotki</a></li>
</ul>
</li>
<li class="item-112 nav-item">
<a href="#" class="nav-link">xxx</a>
</li>
</ul>
</div>
</div>
</nav>

编辑：我忘记了菜单中的第四个元素，不用担心这个。

我希望能够实现像我这样的事情。在这个页面上：

https://www.w3schools.com/howto/howto_css_dropdown.asp

Answer 1

链接（W3School）中的示例仅使用css完成，但您html有bootstrap个类

所以要使下拉列表工作，您需要bootstrap的{{1}}和。{ 这是一个工作小提琴：https://jsfiddle.net/69hev2g4/23/

基本上，您需要.js用于第二个id，并在之前的链接中添加ul和data-target，并为其添加dropdown-collapse类首先隐藏，

collapse

您可以使用此工具查看代码中的差异：https://www.diffchecker.com/

Joomla下拉菜单

1 个答案: