jquery - JQueryドロップダウンマウスアウト

Question

簡単な問題があると思いますが、解決策がわかりません。「one」-div（メニュートップのみ！）をマウス入力すると、正しく展開されますが、「one」-divをマウスアウトすると、折りたたまれますが、そうではありません。マウスが「 oneX」-div（メニューポイントのコンテナ！）を離れると最初に折りたたまれるはずのJSファイルを配置しました。

ここにコード：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

この動作デモリンクを試してください http://codebins.com/bin/4ldqp7d

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

Answer 3

これで試してください

$(document).ready(function(){
$("div#one").mouseover(function() {
    $("div#oneX").slideDown("normal");
});
$("div#oneX").mousedown(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 デモ

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