Question

我有一个下拉菜单我希望在悬停时保持打开状态。我之前使用的是.click（），它会保持打开状态，但当我将代码更改为.hover（）时，只要我将鼠标从顶部链接移开，它就会消失。这是我的代码：

<nav>
            <div class="nav-mobile">
                <a id="nav-toggle" href="#"><span></span></a>
            </div>
            <ul class="nav-list">
                <li><a href="#">Solutions</a>
                    <ul class="nav-dropdown">
                        <li><a href="#">Click & Collect</a></li>
                        <li><a href="#">Endless Aisle</a></li>
                        <li><a href="#">Ship from Store</a></li>
                        <li><a href="#">Partner Dropship</a></li>
                        <li><a href="#">In-Store Returns</a></li>
                        <li><a href="#">Fulfillment Optimization</a></li>
                    </ul>
                </li>
                <li><a href="#">The Way We Work</a>
                    <ul class="nav-dropdown">
                        <li><a href="#">Software as a Service</a></li>
                        <li><a href="#">Delivering Best Practice</a></li>
                        <li><a href="#">Reusable Integrations</a></li>
                        <li><a href="#">Partner Collaboration</a></li>
                        <li><a href="#">Sharing Success</a></li>
                        <li><a href="#">Living Our Values</a></li>
                    </ul>
                </li>
                <li><a href="#"><img class="flag" src="assets/english.png" alt="">English</a>
                    <ul class="nav-dropdown">
                        <li><a href="#"><img class="flag" src="assets/cantonese.png" alt="">Cantonese</a></li>
                        <li><a href="#"><img class="flag" src="assets/japanese.png" alt="">Japanese</a></li>
                        <li><a href="#"><img class="flag" src="assets/korean.png" alt="">Korean</a></li>
                        <li><a href="#"><img class="flag" src="assets/mandarin.png" alt="">Mandarin</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

这是我的jquery：（

function($) {
    $(function() {
        $('nav ul li > a').not($('.only-child')).mouseenter(function(e){
            $(this).siblings('.nav-dropdown').slideToggle();
            $('.nav-dropdown').not($(this).siblings()).hide();
            e.stopPropagation();
        });
        $('nav ul li > a').not($('.only-child')).mouseleave(function(e) {
            $(this).siblings('.nav-dropdown').slideToggle();
            e.stopPropagation();
        })
        $('html').click(function(){
            $('.nav-dropdown').hide();
        });

        $('#nav-toggle').click(function() {
            $('nav ul').slideToggle();
        });

        $('#nav-toggle').on('click', function() {
            this.classList.toggle('active');
        });

    });
})(jQuery);

如何让它在悬停时起作用？

Answer 1

你使用悬停选择器犯了一些错误，你必须使用parent > child选择器。并删除mouseout效果，我对您的代码进行了一些更改，以便更具可读性，请检查：

＆＃13;

$(".nav-dropdown").hide()
$('nav > ul > li > a:not(.only-child)').mouseenter(function(e){
    $('.nav-dropdown').hide();
    $(this).next('.nav-dropdown').slideToggle();
    e.stopPropagation();
});
/*$('nav ul li > a:not(.only-child)').mouseleave(function(e) {
    $(this).siblings('.nav-dropdown').slideToggle();
    e.stopPropagation();
})*/
$('html:not(.nav-dropdown)').click(function(){
    $('.nav-dropdown').hide();
});

$('#nav-toggle').click(function() {
    $('nav ul').slideToggle();
});

$('#nav-toggle').on('click', function() {
    this.classList.toggle('active');
});

＆＃13;

.nav-list > li{
    border: 1px solid black;
    width: 300px;
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav>
            <div class="nav-mobile">
                <a id="nav-toggle" href="#">Slide List under me<span></span></a>
            </div>
            <ul class="nav-list">
                <li>
                    <a id="test1" href="#">Solutions</a>
                    <ul class="nav-dropdown">
                        <li><a href="#">Click & Collect</a></li>
                        <li><a href="#">Endless Aisle</a></li>
                        <li><a href="#">Ship from Store</a></li>
                        <li><a href="#">Partner Dropship</a></li>
                        <li><a href="#">In-Store Returns</a></li>
                        <li><a href="#">Fulfillment Optimization</a></li>
                    </ul>
                </li>
                <li><a href="#">The Way We Work</a>
                    <ul class="nav-dropdown">
                        <li><a href="#">Software as a Service</a></li>
                        <li><a href="#">Delivering Best Practice</a></li>
                        <li><a href="#">Reusable Integrations</a></li>
                        <li><a href="#">Partner Collaboration</a></li>
                        <li><a href="#">Sharing Success</a></li>
                        <li><a href="#">Living Our Values</a></li>
                    </ul>
                </li>
                <li><a href="#"><img class="flag" src="assets/english.png" alt="">English</a>
                    <ul class="nav-dropdown">
                        <li><a href="#"><img class="flag" src="assets/cantonese.png" alt="">Cantonese</a></li>
                        <li><a href="#"><img class="flag" src="assets/japanese.png" alt="">Japanese</a></li>
                        <li><a href="#"><img class="flag" src="assets/korean.png" alt="">Korean</a></li>
                        <li><a href="#"><img class="flag" src="assets/mandarin.png" alt="">Mandarin</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

＆＃13;

Answer 2

检查此链接https://stackoverflow.com/a/8447294/7643918，Nutail解释得非常好，您需要为鼠标输入和鼠标离开事件编写代码。

在hover jquery上保持子菜单打开

2 个答案: