最簡易的JQUERY折疊菜單有預覽效果

發(fā)布時間：2020-05-26 02:38:50 來源：網絡閱讀：559 作者：dxdd51568 欄目：web開發(fā)

效果：

HTML代碼：

<span>第一個列表</span>

<a>第一個列表內容一</a>

<a>第一個列表內容二</a>

<a>第一個列表內容三</a>

<a>第一個列表內容四</a>

</div>

<span>第二個列表</span>

<a>第二個列表內容一</a>

<a>第二個列表內容二</a>

<a>第二個列表內容三</a>

<a>第二個列表內容四</a>

</div>

<span>第三個列表</span>

<a>第三個列表內容一</a>

<a>第三個列表內容二</a>

<a>第三個列表內容三</a>

<a>第三個列表內容四</a>

</div>

CSS代碼：

.menu{ width:150px;}

.haschildren {cursor:pointer; background:#666; color:#FFF;}

div a{ display:none;float:left; width:150px;background:#ccc;} //初始化的時候隱藏所有a元素

.highlight{ color:#FFF;background:#0C3; }

JQUERY代碼：

$(document).ready(function(){ //待文檔加載

$(".haschildren").click(function(){ //為類為haschildren的元素添加點擊事件

$(this).addClass("highlight").children("a").show().end() //當其被點擊就添加一個css,樣式名為highlight,并且其子元素a全部顯示。

.siblings().removeClass("highlight").children("a").hide(); //于此同時它的同胞元素，也就是其他類名為children的元素，移除highlight類，且下面的a元素隱藏。

});

</script>

向AI問一下細節(jié)

最簡易的JQUERY折疊菜單 有預覽效果