Question

我是一个可怜的程序员可以帮助我解决这个问题。当我鼠标悬停在“当你点击这里”时ul的其余部分向下滑动，当我鼠标向上滑动到这里它的工作良好。但当我鼠标悬停在mu ul“我们”文本时它需要停留，当我从文本鼠标中“我们”它应该向上滑动。但在我的代码中，当我将鼠标悬停在文本上“我们”它停留当我把它鼠标移出时，它会一直向前滑动。任何人都可以帮助我。my code

是js小提琴

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert('fdsafdasfdas');

$("#aaaaa").mouseover( function() {
//alert('ssss');
var lis = $(this).next('ul').find('li');

$(lis).each(function(index) {
var li = $(this);

setTimeout(function() {
li.slideDown(1000);
}, 10 * index);
});
});
$("#aaaaa").mouseout( function() {
//alert('ssss');
var bu=$(this).next('ul').find('li');
$(bu).each(function(index) {
var bu1 = $(this);

setTimeout(function() {
bu1.slideUp(1000);
}, 10 * index);
});
});

$("#dropdown").mouseout( function() {
//alert('out');
var bu=$(this).next('ul').find('li');
$(bu).each(function(index) {
var bu1 = $(this);

setTimeout(function() {
bu1.slideUp(1000);
}, 10 * index);
});
});



$("#bag").mouseenter( function() {
    $("#aaaaa").mouseout( function() {
//alert('opopopopopopo');
var bu=$(this).next('ul').find('li');
$(bu).each(function(index) {
var bu1 = $(this);

setTimeout(function() {
bu1.stop(1000);
}, 10 * index);
});
});
//alert('ssss');
setTimeout(function() {
bu1.delay(5000);
}, 10 * index);
});
$("#bag").mouseout( function() {
var bu=$(this).next('li');
$(bu).each(function(index) {
var bu1 = $(this);

setTimeout(function() {
bu1.slideUp(1000);
}, 10 * index);
});
});

});

</script>
#dropdown li {
display:none;
}
<div id="dropdown" style="width:200px; border:solid 1px #000;">

<div id="aaaaa">when you click here</div>

<ul id="bag" style="width:200px;position:relative;top:-10px;">
<li id="bag">We</li>
<li id="bag">We</li>
<li id="bag">We</li>
<li id="bag">We</li>
<li id="bag">We</li>
</ul>
</div>

Answer 1

问题是您多次使用相同的ID。这是一个有效的例子：

        <div id="dropdown" style="width:200px; border:solid 1px #000;">

    <div id="aaaaa">when you click here</div>

    <ul class="notused" style="width:200px;position:relative;top:-10px;">
    <li class="bag">We</li>
    <li class="bag">We</li>
    <li class="bag">We</li>
    <li class="bag">We</li>
    <li class="bag">We</li>
    </ul>
    </div>

和javascript：

    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    //alert('fdsafdasfdas');


    $("#aaaaa").mouseout( function() {
    //alert('ssss');
    var bu=$(this).next('ul').find('li');
    $(bu).each(function(index) {
    var bu1 = $(this);

    setTimeout(function() {
    bu1.slideUp(1000);
    }, 10 * index);
    });
    });

    $("#dropdown").mouseout( function() {
    //alert('out');
    var bu=$(this).next('ul').find('li');
    $(bu).each(function(index) {
    var bu1 = $(this);

    setTimeout(function() {
    bu1.slideUp(1000);
    }, 10 * index);
    });
    });



    $(".bag").mouseenter( function() {
        $("#aaaaa").mouseout( function() {
    //alert('opopopopopopo');
    var bu=$(this).next('ul').find('li');
    $(bu).each(function(index) {
    var bu1 = $(this);

    setTimeout(function() {
    bu1.stop(1000);
    }, 10 * index);
    });
    });
    //alert('ssss');
    setTimeout(function() {
    bu1.delay(5000);
    }, 10 * index);
    });
    $(".bag").mouseout( function() {
    var bu=$(this).next('li');
    $(bu).each(function(index) {
    var bu1 = $(this);

    setTimeout(function() {
    bu1.slideUp(1000);
    }, 10 * index);
    });
    });
    });

    </script>

只需多次使用“bag”类而不是相同的id。我希望它有所帮助。

Answer 2

稍微测试一下，当你在#dropdown中移动鼠标时，使用鼠标（over | out）多次触发有一些问题。

jQuery有mouseenter和mouseleave为我解决了这个问题。

让我知道它是怎么回事。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
    var index = 100;

    $(document).ready(function(){
        $("#dropdown").mouseenter(function()
        {
            var d = new Date();
            console.log('dropdown mouseover' + d);
            $('#bag').slideDown(1000);

            return;

            // You will need the debounce plugin if you want the extra delay.
            setTimeout(function() {
                $('#bag').slideDown(1000);
            }, 10 * index);
        });

        $("#dropdown").mouseleave(function()
        {
            var d = new Date();
            console.log('dropdown mouseout' + d);

            $('#bag').slideUp(1000);

            return;

            // You will need the debounce plugin if you want the extra delay.
            setTimeout(function() {
                $('#bag').slideUp(1000);
            }, 10 * index);
        });

    });
</script>

<style type="text/css">
    #dropdown {
        background-color: red;
        width:200px;
        border: solid 8px #000;
    }

    #aaaaa {
        background-color: green;
        display: block;
    }

    #bag {
        background-color: yellow;
        display: none;
    }

    /* This is needed for some reason, the li's get display set to none. */
    #bag li {
        display: block;
    }
</style>

<div id="dropdown">
    <div id="aaaaa">when you click here</div>
    <ul id="bag">
    <li id="bag">We</li>
    <li id="bag">We</li>
    <li id="bag">We</li>
    <li id="bag">We</li>
    <li id="bag">We</li>
    </ul>
</div>

Answer 3

这个怎么样？

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#aaaaa").mouseenter( function() {
    $("#bag").slideDown(1000);
});

$("#aaaaa").mouseleave( function() {
    $("#bag").slideUp(1000);
});
});
</script>

这里是干净的代码行（包括HTML）：http://jsfiddle.net/LFKxF/11/

如何使用jquery减慢列出悬停效果

3 个答案: