通过单击链接而不是图标来更改移动导航打开操作

Question

我有一个问题，我已经尝试了一个多星期了。我一直在为其页眉和页脚元素编辑预制模板。其余的我都使用了 Bootstrap 3，因为模板是 Bootstrap 3。从那以后，我发现 Bootstrap 3 不支持移动导航上的子菜单。

问题出在移动导航上。带有子菜单的链接只能通过单击链接右侧的图标(链接图标(来打开。单击链接本身不会打开子菜单。该图标非常丑陋(即使我将fontello更改为字体真棒(，并且使链接偏离中心。另外，点击的区域很小。我和几个朋友一起测试了它，他们尝试点击链接，然后发现他们必须点击图标。

我尝试编辑JS代码，但由于我不是专家，所以没有用。我什至尝试使用显示：none 使用媒体查询对其中一个 li 元素进行隐藏/取消隐藏;但这仅适用于一个链接。

移动导航是垂直的和居中的。

下面是JS代码。

var $menu = $('.nav-menu', '#primary-navigation');
// add classes
$menu.find('li').each(function() {
if($(this).children('ul').length) {
$(this).addClass('has-submenu');
$(this).find('>a').after('<span class="submenu-toggle"></span>');
}
});
var $submenuTrigger = $('.has-submenu > .submenu-toggle');
// submenu link click event
$submenuTrigger.on( "click", function() {
$(this).parent().toggleClass('active');
$(this).siblings('ul').toggleClass('active');
});

这是 html

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation"> 
<a class="menu-toggle"><span class="lines"></span></a>
<div class="nav-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#" class="selected">Explore</a>
<ul>
<li><a href="ex_languages.html">Languages</a></li>
<li><a href="ex_gallery.html">Gallery</a></li>
<li><a href="ex_glossary.html">Glossary</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul>
<li><a href="ab_about.html">About</a></li>
<li><a href="ab_faq.html">Questions &amp; Answers</a></li>
</ul>                            
</li>
<li><a href="blog/index.php">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>

这是 css

.submenu-toggle:before {
font-family: "Font Awesome 5 Free";
content: "f0d7";
color:#fff; 
font-size: 15px; 
font-weight: 900; 
display: inline-block; 
width: 26px; 
line-height: 24px; 
text-align: center;
margin-left: -8px; 
margin-bottom: 8px;
cursor:pointer;
}
.active > .submenu-toggle:before {
font-family: "Font Awesome 5 Free";
content: "f0d8";
}

如果有人能帮忙，那就太好了。如果链接和图标都是可点击的，这是可以的，但让链接可点击，或者让图标的点击区域延伸到链接上，是最重要的。

谢谢:)

Answer 1

你是对的 - Bootstrap 3 不支持移动导航上的子菜单。这就是为什么你应该自己处理它。

按照您的逻辑，触发器应该是：

var $submenuTrigger = $('.has-submenu > .submenu-toggle, .has-submenu > a');

您还需要添加一个小技巧：

$('.nav-menu > ul').on('click', function(event) {
event.stopPropagation();
});

这是防止引导程序使用的事件冒泡所必需的 - 换句话说，您禁用子项的引导程序以启用您的代码。