三级下拉菜单jQuery
2017-09-22 本文已影响6人
小小蒜头
HTML代码
<ul>
<li>菜单栏
<ul>
<li>栏目一
<ul>
<li>
列表一
</li>
</ul>
</li>
<li>栏目二
<ul>
<li>
列表一
</li>
<li>
列表二
</li>
</ul>
</li>
<li>栏目三
<ul>
<li>
列表一
</li>
<li>
列表二
</li>
<li>
列表三
</li>
</ul>
</li>
</ul>
</li>
</ul>
Jquery代码
$(function () {
$("li").has("ul").mouseover(function () {
$(this).children().css("display", "block");
}).mouseout(function () {
$(this).children().css("display", "none");
});
});
JS代码
function showTab(value) {
var menu = document.getElementById(value);
var type = menu.style.display;
if(type == "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}