javascript - Bootstrap悬停水平导航

我正在使用Bootstrap创建带有带有水平subnav的下拉选项的菜单，并且我希望在悬停而不是单击时显示subnav，但是这样做很麻烦。我正在为其创建网站的人员要求我不要使用标签或药片，而是要保持外观和当前功能。

我曾尝试查看其他指南，以了解如何在悬停上进行下拉工作，但它们全都适用于垂直subnav，并且尝试使它们与水平subnav一起使用，但我仍然无法做到。

这不是很重要，但是我将如何减少下拉菜单的可单击区域，以便您必须单击单词，但仍保持菜单间距。还有一种方法可以修复动画，以便当我直接从下拉菜单1切换到下拉菜单2时（反之亦然），原始菜单不会被按下然后消失？如果情况变得更糟，我将禁用动画，但是我想问一下是否有解决方案。

这是我的代码的Bootply链接：http://www.bootply.com/zP99qlIYPP

提前非常感谢您！

最佳答案

这应该做。

$('#topmenu').parent().css({'position': 'relative'});
$('#topmenu .dropdown').hover(
    function () {
        hoverMe($(this));
    },
    function () {
        hoverMeNot($(this));
    }
);
function hoverMe(el) {
    var target = el.find('a').eq(0).attr('data-target');
    el.append($(target).addClass('out'));
}

function hoverMeNot(el) {
    var target = el.find('a').eq(0).attr('data-target');
    el.css({'pointer-events': 'none'});
    if ($(target).parent().find(target + ":hover").length > 0) {
        $(target).bind('mouseleave', function (e) {
            hoverMeNot(el);
        });
    }
    else {
        $(target).appendTo($('#submenu')).removeClass('out');
        el.css({'pointer-events': 'auto'});
    }
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
    color: #969590;
}

.navbar {
    margin-bottom: 0;
    border-radius: 0;
    min-height: 32px !important
}

.navbar-xs {
    margin-bottom: 0;
}

ul {
    margin: 0;
}

.nav > li.dropdown:hover {
    position: static;
    overflow: visible;
}

.dropdown .nav {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: calc(100% - 1px);
    z-index: 2;
}
@media (min-width: 768px) {
    .collapse.out {
        display: block;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <nav class="navbar-xs" role="navigation" id="topmenu">
        <ul class="nav nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a href="#" data-toggle="collapse" data-target="#test1">Dropdown 1</a>
            </li>
            <li class="dropdown">
                <a href="#" data-toggle="collapse" data-target="#test2">Dropdown 2</a>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>
<div>
    <nav class="navbar" role="navigation" id="submenu">
        <ul class="nav nav-justified collapse" id="test1">
            <li><a href="#" id="">Foo</a></li>
            <li><a href="#" id="">Bar</a></li>
            <li><a href="#" id="">Apples</a></li>
            <li><a href="#" id="">Oranges</a></li>
        </ul>
        <ul class="nav nav-justified collapse" id="test2">
            <li><a href="#" id="">Hello</a></li>
            <li><a href="#" id="">World</a></li>
            <li><a href="#" id="">Testing</a></li>
            <li><a href="#" id="">Experimenting</a></li>
        </ul>
    </nav>
</div>