Bootstrap Hover Horizo​​ntal Subnav

Question

我正在使用Bootstrap来创建一个带有水平子空间的下拉选项的菜单，我希望在悬停而不是点击时显示子空间，但是我很难这样做。我正在为该网站制作的人请求我不使用标签或药片并保持这种外观和当前功能。

我已经尝试查看其他指南，了解如何让下拉工作悬停，但它们都是针对垂直subnav，我尝试让它们使用水平subnav但我仍然不能这样做。< / p>

这不太重要，但我如何减少下拉菜单的可点击区域，以便您必须单击单词，但仍保持菜单的间距。还有一种方法来修复动画，以便当我直接从Dropdown 1切换到Dropdown 2或反之，原始菜单不会被推下然后消失？如果最坏的情况发生，我只会禁用动画，但我想我会问是否有解决方案。

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

提前非常感谢你！

Answer 1

应该这样做。

$('#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>