Javascript 子菜单消失

CSS:

ul.topnav {
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
}

ul.topnav li {
position: relative;
display: inline;
margin: 0px;
padding: 0px;
}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}

ul.topnav li ul.subnav {
list-style: none;
position: absolute;
display: none;
background-color: black;
margin: 0px;
padding: 0px;
border: 1px solid gray;
}

ul.topnav li ul.subnav li {
width: 170px;
margin: 0px;
padding: 0px;
}

<ul class="topnav">  
    <li><a href="#">Home</a></li>  
    <li>  
        <a href="#">Tutorials</a>  
        <ul class="subnav">  
            <li><a href="#">Sub Nav Link</a></li>  
            <li><a href="#">Sub Nav Link</a></li>  
        </ul>  
    </li>
</ul>

$(document).ready(function() {
        $("ul.subnav").parent().append("<span>^</span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
        $("ul.topnav li span").click(function() { //When trigger is clicked...  

        //Following events are applied to the subnav itself (moving subnav up and down)  
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
        $(this).parent().hover(function() {}, function(){  
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
        });  

        //Following events are applied to the trigger (Hover events for the trigger)  
        }).hover(function() {  
            $(this).addClass("subhover"); //On hover over, add class "subhover"  
        }, function(){  //On Hover Out  
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
        });
 });

HTML:

ul.topnav {
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
}

ul.topnav li {
position: relative;
display: inline;
margin: 0px;
padding: 0px;
}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}

ul.topnav li ul.subnav {
list-style: none;
position: absolute;
display: none;
background-color: black;
margin: 0px;
padding: 0px;
border: 1px solid gray;
}

ul.topnav li ul.subnav li {
width: 170px;
margin: 0px;
padding: 0px;
}

<ul class="topnav">  
    <li><a href="#">Home</a></li>  
    <li>  
        <a href="#">Tutorials</a>  
        <ul class="subnav">  
            <li><a href="#">Sub Nav Link</a></li>  
            <li><a href="#">Sub Nav Link</a></li>  
        </ul>  
    </li>
</ul>

$(document).ready(function() {
        $("ul.subnav").parent().append("<span>^</span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
        $("ul.topnav li span").click(function() { //When trigger is clicked...  

        //Following events are applied to the subnav itself (moving subnav up and down)  
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
        $(this).parent().hover(function() {}, function(){  
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
        });  

        //Following events are applied to the trigger (Hover events for the trigger)  
        }).hover(function() {  
            $(this).addClass("subhover"); //On hover over, add class "subhover"  
        }, function(){  //On Hover Out  
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
        });
 });

Javascript/JQuery:

ul.topnav {
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
}

ul.topnav li {
position: relative;
display: inline;
margin: 0px;
padding: 0px;
}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}

ul.topnav li ul.subnav {
list-style: none;
position: absolute;
display: none;
background-color: black;
margin: 0px;
padding: 0px;
border: 1px solid gray;
}

ul.topnav li ul.subnav li {
width: 170px;
margin: 0px;
padding: 0px;
}

<ul class="topnav">  
    <li><a href="#">Home</a></li>  
    <li>  
        <a href="#">Tutorials</a>  
        <ul class="subnav">  
            <li><a href="#">Sub Nav Link</a></li>  
            <li><a href="#">Sub Nav Link</a></li>  
        </ul>  
    </li>
</ul>

$(document).ready(function() {
        $("ul.subnav").parent().append("<span>^</span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
        $("ul.topnav li span").click(function() { //When trigger is clicked...  

        //Following events are applied to the subnav itself (moving subnav up and down)  
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
        $(this).parent().hover(function() {}, function(){  
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
        });  

        //Following events are applied to the trigger (Hover events for the trigger)  
        }).hover(function() {  
            $(this).addClass("subhover"); //On hover over, add class "subhover"  
        }, function(){  //On Hover Out  
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
        });
 });

$（文档）.ready（函数（）{
$（（$ul.subnav”）.parent（）.append（“^”）；//仅在启用js时显示下拉触发器（在ul.subnav*之后添加空span标记）
$（.ul.topnav li span”）。单击（函数（）{//当单击触发器时。。。
//以下事件应用于subnav本身（上下移动subnav）
$（this）.parent（）.find（“ul.subnav”）.slideDown（“fast”）.show（）；//单击后下拉子AV
$（this.parent（）.hover（function（）{}，function（）{
$（this）.parent（）.find（“ul.subnav”）.slideUp（'slow'）；//当鼠标悬停在subnav之外时，将其向上移动
});  
//以下事件应用于触发器（触发器的悬停事件）
}).hover（函数（）{
$（this）.addClass（“subhover”）；//悬停在上方时，添加类“subhover”
}，函数（）{//悬停在外
$（this）.removeClass（“subhover”）；//悬停时，删除类“subhover”
});
});

---

单击

^

时，菜单将显示，但当您想要选择子项时，菜单将消失。

发生的情况是您不再悬停，因此

$(this).parent().hover(function() {}, function(){  
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
        }); 

这就是所谓的。您需要做的是在导航后面放置一个您认为合适的大小的不可见div，然后使用

.mouseout（）

调用

.slideup（）