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

Question

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

移动导航有问题。带有子菜单的 link 只能通过单击 link（LINK 图标）右侧的图标打开。单击 link 本身不会打开子菜单。这个图标太丑了（即使我把 fontello 换成了很棒的字体）而且 link 偏离了中心。另外，它的点击区域很小。我和几个朋友一起测试了它，他们尝试点击 links，然后发现他们必须点击图标。

我试过编辑 JS 代码，但是因为我不是专家，所以没有用。我什至尝试使用媒体查询在其中一个 li 元素上使用 display:none 作为 hide/unhide；但这只适用于一个 link。

移动导航是垂直居中的。

下面是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";
}

如果有人能提供帮助，那就太好了。如果 link 和图标都可以点击也可以，但是 link 可以点击，或者图标的点击区域超过 link 才是最重要的。

谢谢:)

Answer 1

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

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

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

您还需要添加一些技巧：

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

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

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

Change mobile nav open action by clicking on link not icon

javascript

css

mobile

submenu

twitter-bootstrap