0

我是一个可怜的程序员可以帮助我解决这个问题。当我将鼠标悬停在“当你点击这里”时，其余的ul幻灯片向下滑动，当我将鼠标向上滑动到这里时它工作良好。但是当我将鼠标悬停在 mu 上时ul“我们”文本它需要留下来，当我从文本“我们”中移出鼠标时，它应该向上滑动。但是在我的代码中，当我将鼠标悬停在文本“我们”上时，当我将鼠标移出时它会保持原样，不能向上滑动。可以请任何人帮助我。这是我的代码的 js fiddle

<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>
4

3 回答 3

0

问题是您多次使用相同的 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。我希望它有所帮助。

于 2013-05-22T14:52:54.457 回答
0

对此进行了一些测试，当您在#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>
于 2013-05-22T15:00:28.873 回答
0

那这个呢？

<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/

于 2013-05-22T15:06:41.423 回答