大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
知道你要啥样的,就说个最简单的竖列折叠菜单吧,比如:
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网络空间、营销软件、网站建设、民和网站维护、网站推广。
菜单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();
)}
[img]由上向下滑动由 slideDown()控制,
由下向上滑动由 slideUp()控制。
首先将菜单条隐藏,这种情况一般赋予其CSS属性:display:none; 来隐藏。
然后通过jquery赋予它事件:点击或者鼠标移入。
通过这个事件绑定由下向上滑动的 slideUp()。
最后通过点击或者鼠标移出绑定由上向下滑动的 slideDown()。
slideDown()slideUp()中的括号填入速度。比如
slideDown("fast")
那是因为你离开的时候就马上调用了$(".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();
});
});
这是一个弹出提示层效果
可以自定义位置和内容
参考资料里面有教程和源码
1、contextMenu我们可以根据数据记录隐藏一些菜单项,这个可以在onShowMenu事件中,根据e.currentTarget触发源获取数据,再根据你需要改变原菜单项
需要通过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();
});