//以下是JQ的方法,链式操作一行搞定!
<div class="content">
<ul>
<li class="level1">
<a href="#" class="current">喇叭裤</a>
<ul class="level2" style="display: block"> //初始化一个二级菜单显示
<li>短裤1</li>
<li>短裤</li>
<li>短裤</li>
</ul>
</li>
<li class="level1">
<a href="#" >喇叭裤</a>
<ul class="level2">
<li>短裤1</li>
<li>短裤</li>
<li>短裤</li>
</ul>
</li>
<li class="level1">
<a href="#" >喇叭裤</a>
<ul class="level2">
<li>短裤1</li>
<li>短裤2</li>
<li>短裤3</li>
</ul>
</li>
</ul>
</div>
</body>
<script>
第一种方法:显示一个二级菜单时其他的隐藏,再次点击已显示的二级菜单时,该二级菜单隐藏
// $(".level1 > a").click(function(){
// var iclass = $(this).attr("class");
// if (iclass=="current"){
// $(this).next().hide();
// }else {
// $(this).addClass("current").next().show()
// .parent().siblings()
// .children("a").removeClass("current").next().hide();
// return false;
// }
// });
第二种方法:可同时显示多个二级菜单,点击显示/隐藏
$(function(){
$(".level1 > a").click(function(){
$(this).next().toggle(800,function(){
//TODO
});
});
});
// $(function(){
// $(".level1 > a").click(function(){
// $(this).next().slideToggle(800,function(){ //滑动
// //TODO
// });
// });
// });
</script>
下面是原生JS实现的代码:
<span style="font-size:12px;"><div class="container">
<ul class="menue">
<li>
<span>水果</span>
<ul class="sub-menue">
<li>橙子</li>
<li>苹果</li>
</ul>
</li>
<li>
<span>水果</span>
<ul class="sub-menue">
<li>橙子</li>
<li>苹果</li>
</ul>
</li>
<li>
<span>水果</span>
<ul class="sub-menue">
<li>橙子</li>
<li>苹果</li>
</ul>
</li>
</ul>
</div>
<script>
var parent = document.getElementsByClassName('menue')[0];
parent.οnclick=function (event) {
var e = event || window.event,
source = e.target||e.srcElement;
if (source.tagName.toLowerCase() == 'span' ){
var next = getNextSibling(source);
toggleClass(next,'show');
var parent = source.parentNode;
var parentSiblings = getAllSiblings(parent);
for( var i = 0 ;i<parentSiblings.length; i++){
var secondMenue = getLastSibling(parentSiblings[i]),
classIndex = secondMenue.className.indexOf('show');
if(classIndex != -1){
secondMenue.className = secondMenue.className.slice(0,classIndex);
}
}
}else {
return false;
}
stopPropagation(e);
};
function stopPropagation(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
function getNextSibling(obj){
var result = obj.nextSibling || obj.nextElementSibling;
while (result.nodeType != 1 ){
result = result.nextSibling || result.nextElementSibling;
if (result == null){
break;
}
}
return result;
}
function getPreviousSibling(obj){
var result = obj.previousSibling || obj.previousElementSibling;
while (result.nodeType != 1 ){
result = result.previousSibling || result.previousElementSibling;
if (result == null){
break;
}
}
return result;
}
function getLastSibling(obj){
var result = obj.lastChild || obj.lastElementChild;
while (result.nodeType != 1 ){
result = result.previousSibling;
if (result == null){
break;
}
}
return result;
}
function getAllSiblings(obj) {
var arr = [],
previous =getPreviousSibling(obj) ,
next = getNextSibling(obj);
while(previous!= null){
arr.push(previous);
previous = getPreviousSibling(previous);
}
while (next != null){
arr.push(next);
next = getNextSibling(next);
}
return arr.reverse();
}
function toggleClass(obj,cName) {
var index = obj.className.indexOf(cName);
if ( index === -1){
obj.className +=' '+cName;
}else {
obj.className = obj.className.slice(0,index);
}
}
</script></span>
以上代码兼容了IE并且把可重用的方法提取了出来,同时使用了事件代理来减少对DOM的操作来减少回流与重绘。原声JS操作看起来代码多了许多,但还是与JQ同样的思路,当点击一级菜单的时候,显示二级菜单,并且把其他的二级菜单关闭,而关闭与显示的操作的原理即为添加与删除class,我们可以通过transform animate等来添加一些动态效果,让显示与隐藏过渡的更加平滑。
有任何问题可在下方评论。