13518219792
那是因为你离开的时候就马上调用了$(".u_ddl").hide();当然会马上消失了，开个定时器让他延时消失就可以了
站在用户的角度思考问题，与客户深入沟通，找到杞县网站设计与杞县网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、网站空间、企业邮箱。业务覆盖杞县地区。
$(document).ready(function(){
var timer=null;//定义一个定时器变量
$(".u_menu_setting").mouseover(function(){
clearTimeout(timer);
$(".u_ddl").show();
});
$(".u_menu_setting").mouseout(function(){
timer=setTimeout(function(){
$(".u_ddl").hide();
},300);
});
$$(".u_ddl").mouseout(function(){
timer=setTimeout(function(){
$(".u_ddl").hide();
},300);
});
$(".u_ddl").mouseover(function(){
clearTimeout(timer);
$(".u_ddl").show();
});
});
slideDown(),slideUp()
事件就用mouseenter mouseleave
!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
style type="text/css"
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li{
background-image: url(imgs/libg.jpg);
}
.wrap ul li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
/style
script src="jq.js"/script
script type="text/javascript"
$(function(){
// 分析思路:将鼠标到任何一个li上面 让对应的li里面的ul 显示 让其他的 li里面的ul隐藏
// 1 给所有的.wrapulli 添加注册鼠标移上事件 mouseover
$(".wrapulli").mouseover(function(){
// 2 让它里面的直接子元素ul 去滑入
$(this).children("ul").stop().slideDown();
})
//2 给所有的.wrapulli 添加注册鼠标移出事件 mouseout
$(".wrapulli").mouseout(function(){
// 2 让它里面的直接子元素ul 去滑出
$(this).children("ul").stop().slideUp();
})
})
/script
/head
body
div class="wrap"
ul
li
a href="javascript:;"一级菜单1/a
ul class="ul"
li
a href="javascript:;"二级菜单11/a
/li
li
a href="javascript:;"二级菜单12/a
/li
li
a href="javascript:;"二级菜单13/a
/li
/ul
/li
li
a href="javascript:;"一级菜单2/a
ul
li
a href="javascript:;"二级菜单21/a
/li
li
a href="javascript:;"二级菜单22/a
/li
li
a href="javascript:;"二级菜单23/a
/li
/ul
/li
li
a href="javascript:;"一级菜单3/a
ul
li
a href="javascript:;"二级菜单31/a
/li
li
a href="javascript:;"二级菜单32/a
/li
li
a href="javascript:;"二级菜单33/a
/li
/ul
/li
/ul
/div
/body
/html
知道你要啥样的，就说个最简单的竖列折叠菜单吧,比如：
菜单1
子菜单1
子菜单2
……
菜单2
子菜单1
子菜单2
……
如果要做这样的折叠菜单 那html为：
div class="menu"
div菜单1/div
ul
li子菜单1/li
li子菜单2/li
……
/ul
/div
div class="menu"
div菜单1/div
ul
li子菜单1/li
li子菜单2/li
……
/ul
/div
css为：(没样式只有功能，样式自己去加)
.menu ul{ display:none}
js为：
$('.menu').click(function(){
$(this).find('ul').slideToggle();
)}
需要通过Jquery来实现这种点击页面其他地方隐藏菜单的效果，重要的一点就是需要通过event.stopPropagation()来阻止事件冒泡：
pa href="javascript:void(0)" class="a"菜单按钮/a/p
div class="menu"
a href=""百度/a
/div
//绑定按钮事件，点击按钮可以打开菜单，同时也能关闭按钮
$(".a").on("click", function(e){
if($(".menu").is(":hidden")){
$(".menu").show();
}else{
$(".menu").hide();
}
//给document绑定一个一次性的click事件，点击关闭菜单
$(document).one("click", function(){
$(".menu").hide();
});
e.stopPropagation();
});
//通过e.stopPropagation()来保证点击菜单不会关闭菜单
$(".menu").on("click", function(e){
e.stopPropagation();
});
由上向下滑动由 slideDown()控制，
由下向上滑动由 slideUp()控制。
首先将菜单条隐藏，这种情况一般赋予其CSS属性：display:none; 来隐藏。
然后通过jquery赋予它事件：点击或者鼠标移入。
通过这个事件绑定由下向上滑动的 slideUp()。
最后通过点击或者鼠标移出绑定由上向下滑动的 slideDown()。
slideDown()slideUp()中的括号填入速度。比如
slideDown("fast")
