Question

我认为我有一个简单的问题，但我看不到解决方案。当我鼠标进入“一个”-div（只有菜单顶部！）时它会正确扩展，但如果我将鼠标移出“一个” - 它会崩溃，但它不应该！我把我的JS文件放在第一个崩溃的地方，如果鼠标离开“ oneX ” - div（菜单点的容器！）

这里的代码： HTML

<div id="root">
            <div style="height:50px;width:100%;"></div>
                <div id="one" class="menuTop">
                    <div style="clear:both;position:absolute;">
                        <div id="oneX" class="menuPointCon">
                            <div class="menuTopHover">Oh shit</div>
                            <div class="menuPoint">awefwafe</div>
                            <div class="menuPoint">wqdwaed</div>
                            <div class="menuPoint">gsregser</div>
                        </div>
                    </div>
                </div>
                <div id="two" class="menuTop">
                    <div style="clear:both;position:absolute;">
                        <div id="twoX" class="menuPointCon">
                            <div class="menuTopHover">Oh shit</div>
                            <div class="menuPoint">awefwafe</div>
                            <div class="menuPoint">wqdwaed</div>
                            <div class="menuPoint">gsregser</div>
                        </div>
                    </div>
                </div>
                <div id="three" class="menuTop">
                    <div style="clear:both;position:absolute;">
                        <div id="threeX" class="menuPointCon">
                            <div class="menuTopHover">Oh shit</div>
                            <div class="menuPoint">awefwafe</div>
                            <div class="menuPoint">wqdwaed</div>
                            <div class="menuPoint">gsregser</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS

#root {
    width:600px;
    height:300px;
    background-color:red;
}
.menuTop {
    float:left;
    width:200px;
    height:50px;
    background-color:blue;
}
.menuPointCon {
    position:relative;
    background-color:green;
    display:none;
}
#one {
}
#two {
}
#three {
}
#oneX{
}
#twoX{
}
#threeX {
}
.menuTopHover {
    position:relative;
    width:200px;
    height:50px;
    color:white;
}
.menuPoint {
    position:relative;
    width:200px;
    height:50px;
    color:white;
}

jQuery / JS

$(document).ready(function(){
    $("div#one").mouseenter(function() {
        $("div#oneX").slideDown("normal");
    });
    $("div#oneX").mouseout(function() {
        $("div#oneX").slideUp("normal");
    });
});

Answer 1

我认为您应该使用mouseleave()代替mouseout()

Answer 2

试试这个

$(document).ready(function(){
$("div#one").mouseover(function() {
    $("div#oneX").slideDown("normal");
});
$("div#oneX").mousedown(function() {
    $("div#oneX").slideUp("normal");
   });
});

Answer 3

试试这个工作演示链接http://codebins.com/bin/4ldqp7d

$("div#one").mouseenter(function() {
        $("div#oneX").slideDown("normal");
    });
    $("div#oneX").mouseleave(function() {
        $("div#oneX").slideUp("normal");
    });

Answer 4

这样给出

$("div#one").mouseenter(function() {
    $("div#oneX").slideDown("normal");
});
$("div#oneX").mouseleave(function() {
    $("div#oneX").slideUp("normal");
});

Answer 5

jsBin demo

$(".menuTop").on('mouseenter mouseleave',function( e ) {
    var $ch = $(this).find('.menuPointCon');
    var evt = e.type=='mouseenter' ? $ch.slideDown() : $ch.slideUp();
});

JQuery下拉列表

5 个答案:

jsBin demo