先贴个效果图,目前测试过的浏览器:IE8及以上,chrome,Firefox,360运行通过
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"});
});