jquery实现折叠式(手拉风琴)菜单
2016-01-27 11:01
585 查看
先贴个效果图,目前测试过的浏览器:IE8及以上,chrome,Firefox,360运行通过
dom结构:
css:
js:
dom结构:
<div class="xybNav"> <div class="xybNavContent"> <div class="xybNavOneList"> <h3>主菜单1</h3> </div> </div> <div class="xybNavContent"> <div class="xybNavOneList"> <h3>主菜单2</h3> </div> <div class="xybNavTwoList" show="close"> <ul class="xybNavUl"> <li class="twoLsit_e">子菜单1</li> <li class="twoLsit_e">子菜单2</li> </ul> </div> </div> </div>
css:
.xybNav { width: 100%; overflow:auto; } .xybNavUl { width: 100%; padding: 0; margin: 0; list-style: none; margin-left: 10px; } .xybNavUl li { padding: 10px; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; color: #ddd; font-size:12px; max-width:150px; _width:150px; overflow:auto; } .xybNavUl li:hover { cursor: pointer; background-color: #0094ff; } .xybNavOneList h3 { font-size: 14px; color: #fff; margin-top: 0px; margin-bottom: 0px; padding: 10px; margin-left:10px; color: #ddd; font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif; } .xybNavOneList:hover { background-color: #0094ff; cursor: pointer; } .xybNavTwoList { padding: 15px; display: none; }
js:
//-----------------------------ie动态Hover------------------------- if (!$.support.leadingWhitespace) { $(document).on("mouseover", ".xybNavUl li", function () { $(this).css({ "cursor": "pointer", "background-color": "#0094ff" }); }); $(document).on("mouseout", ".xybNavUl li", function () { $(this).css("background-color", ""); }); $(document).on("mouseover", ".xybNavOneList", function () { $(this).css({ "cursor": "pointer", "background-color": "#0094ff" }); }); $(document).on("mouseout", ".xybNavOneList", function () { $(this).css("background-color", ""); }); } //-----------------------------ie动态Hover--end-----------------------
//点击一级列表 $(document).on("click", ".xybNavOneList", function () { $(".xybNavOneList").each(function () { $(this).css({ "border-right": "none", "background-color": "" }); }); $(this).next(".xybNavTwoList").children(".xybNavUl").children(".twoLsit_e").css({ "border-right": "none", "background-color": "" }); $(this).css({ "border-right": "4px solid #0bf7b6", "background-color": "#0094ff" }); var id = $(this).attr("id"); //--------------------------------侧边导航栏---------------------------- if ($(this).next(".xybNavTwoList").attr("show") == "close") { $(".xybNavOneList").each(function () { if ($(this).next(".xybNavTwoList").attr("show") == "open") { $(this).next(".xybNavTwoList").attr("show", "close"); $(this).css({ "border-right": "none", "background-color": "" }); $(this).next(".xybNavTwoList").hide(); } else if ($(this).next(".xybNavTwoList").attr("show") == undefined) { $(this).css({ "border-right": "none", "background-color": ""}); } }); $(this).next(".xybNavTwoList").attr("show", "open"); $(this).next(".xybNavTwoList").show(500); } else if ($(this).next(".xybNavTwoList").attr("show") == "open") { $(this).next(".xybNavTwoList").attr("show", "close"); $(this).next(".xybNavTwoList").hide(500); } else if ($(this).next(".xybNavTwoList").attr("show") == undefined) { $(".xybNavOneList").each(function () { if ($(this).next(".xybNavTwoList").attr("show") == "open" || $(this).next(".xybNavTwoList").attr("show") ==undefined ) { //$(this).css({ "border-right": "none", "background-color": "" }); $(this).next(".xybNavTwoList").attr("show", "close"); $(this).next(".xybNavTwoList").hide(); } }); //$(this).css({ "border-right": "4px solid #0bf7b6", "background-color": "#0094ff" }); } //--------------------------------侧边导航栏--end-------------------------- });
//点击二级列表 $(document).on("click", ".twoLsit_e", function () { //alert($(this).attr("data-id")); var li = $(this).parent(".xybNavUl").children("li"); $.each(li, function () { $(this).css({ "border-right": "none", "background-color": "" }); }); $(this).css({"border-right": "4px solid #0bf7b6", "background-color": "#0094ff"}); });
相关文章推荐
- obj.offsetHeight与obj.style.height区别
- jQuery -- label赋值
- 20160127--Jquery的ajax与post使用
- jQuery实例之实现滚动广告的功能
- jQuery Easyui学习之datagrid 动态添加、移除editor
- jQuery学习之旅10 ajax快餐
- jQuery学习之旅 9 动画效果
- getUrlParam,jQuery中的URL参数获取
- jQuery插件开发精品教程让你的jQuery提升一个台阶
- jQuery学习之旅 8 DOM事件操作
- jQuery学习之旅 7 区别this和$(this)
- jQuery学习之旅 6 好用的each()
- jQuery学习之旅 5 $与jQuery对象
- jQuery学习之旅 4 细说DOM操作
- jquery中Live方法不可用,Jquery中Live方法失效
- jQuery placeholder插件 让IE也能够支持placeholder属性
- jQuery学习之旅 3 属性操作与样式操作
- jQuery ajax分页插件实例代码
- JQuery的跨域访问
- jQuery学习之旅 2 选择器【二】