Question

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

问题出在移动导航上。只能通过单击链接右侧的图标（LINK图标）来打开带有子菜单的链接。单击链接本身不会打开子菜单。图标太丑陋了（即使当我将fontello换成真棒字体时也是如此），并且使链接偏离了中心。另外，单击区域很小。我与几个朋友进行了测试，他们尝试单击链接，然后发现他们必须单击图标。

我曾尝试编辑JS代码，但是由于我不是专家，所以没有用。我什至尝试使用display：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();
});

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

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

1 个答案: