使用 JQuery 設計的樹形二級菜單
來源：程序員人生 發(fā)布時間：2014-01-04 10:30:23 閱讀次數：3484次
功能目標：列出二級菜單，點擊某個菜單其他菜單均關閉，次菜單改變狀態(tài)(即若為關閉則變?yōu)榇蜷_，若為打開則關閉)。
自我評價：寫的有點兒初級，但是我們的目標是規(guī)范代碼、更精簡、更簡單。
HTML部分：
<div style="width: 100px;">
<div id="MM">
<a>第一個菜單</a>
<div class="Menu">
<ul>
<li>子菜單1</li>
<li>子菜單1</li>
</ul>
</div>
<a>第二個菜單</a>
<div class="Menu">
<ul>
<li>子菜單2</li>
<li>子菜單2</li>
</ul>
</div>
<a>第三個菜單</a>
<div class="Menu">
<ul>
<li>子菜單3</li>
<li>子菜單3</li>
<li>子菜單3</li>
</ul>
</div>
</div>
</div>
JQuery代碼：
<script type="text/javascript" src="http://www.vxbq.cn/uploads/Common/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$(".Menu").not($(this).next(".Menu")).slideUp("fast");//除去a的下一個div頁面其他div變?yōu)殡[藏。。。
$(this).next(".Menu").slideToggle("fast");//所選div改變顯示狀態(tài)
});
});//liehuo.net
</script>
Css代碼：
<style type="text/css">
.Menu display: none;}
</style>
css只有一句，即初次加載時所有菜單關閉狀態(tài)。
Jquery的選擇器非常強大，如果運用自如使其更好的配合定會大大減少代碼量，使代碼清晰簡單。
轉自：http://www.cnblogs.com/ChaosHero/
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
