Question

晚安：我想鼠标悬停在.slide上显示#panel，然后点击.close显示#panel，谁可以更正我的代码？感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".slide").mouseover(function(){
        $("#panel").slideToggle("slow");
    });
    $(".close").click(function(){
        $("#panel").slideToggle("slow");
    });      
});
</script>
<style type="text/css">
body {
    margin: 0 auto;
    padding: 0;
    width: 1024px;
    height:100%;
}
#wrap {position:absolute;bottom:0px;}
#panel {
    background: #f60;
    width:600px;
    height: 200px;
    display: none;  
}
.slide {
    width:600px;
    height: 20px;
    background-color:#F06;
}
.close{float:right;height:20px;width:20px;background-color:#000;}
</style>
</head>
<body>
<div id="wrap">
<div class="slide">&nbsp;<div class="close">&nbsp;</div></div>
<div id="panel">
    <!-- some content -->
</div>
</div>
</body>
</html>

Answer 1

我认为在这种情况下你不应该使用slideToggle，因为它似乎不会隐藏.slide和.close

$(".slide").mouseover(function(){
    $("#panel").slideDown("slow");
});
$(".close").click(function(){
    $("#panel").slideUp("slow");
});

此外，在将.close div移至#panel之前，这将永远不会有效，因为.close是.slide的孩子，并会触发.slide当您尝试点击moveover

时发生.close次事件

<div id="wrap">
    <div class="slide">&nbsp;</div>
    <div id="panel">
        <div class="close">&nbsp;</div>
        <!-- some content -->
    </div>
</div>

示例：http://jsfiddle.net/MAYag/

Answer 2

IIRC，当鼠标在元素内移动时，mouseover将继续触发。我相信你的代码会在#panel不断切换时引起大量闪烁。也许你想使用mouseenter事件？

Answer 3

您的问题是由于div.close位于div#slide内，这导致鼠标悬停事件也因为关闭而触发。

请更正我的jquery切换

3 个答案: