jquery 實現的摺疊展開的選單

guile發表於2019-02-27
jQuery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>jquery 實現的摺疊展開的選單</title>

<style type="text/css">
    ul {
    list-style-type: none;   /* 去掉每個 ul 和 li 前面的圓點  */
}

.oneLevel {
    width: 150px;
    display: inline-block;
    line-height: 32px;
    padding-left: 5px;
    
    border-right: 1px solid #000;   /* 邊框的顏色  */   
    border-bottom: 1px solid #B4CDCD;
     
    background: #B9D3EE;  /* 第一層選單的背景色    */
    cursor: pointer;
}

.oneLevel > span {
    margin-left: 5px;  
}

.oneLevelUl {       
    padding-left: 15px;  /* 距離外層的左邊 15px   */   
    display: none;
}

.oneLevelLi {        
    height: 25px; 
    padding-top: 3px; 
    padding-left: 5px;
} 

.bMenuTitle {       
    width: 150px;
}    

.bMenuList {      
    padding:0;   
    width: 150px;
} 
</style>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
// 處於開啟狀態的選單的 id
var openedMenuId = "";

$(function(){ 
    $('.bMenuTitle').on('click', function(){
        var idThis = $(this).attr("id");

        if(openedMenuId !== idThis){
            $(this).siblings().children('ul').slideUp();  // 收起其他選單
            $(this).children('ul').slideDown();  // 展開這個選單

            openedMenuId = idThis;
        }else{
            $(this).children('ul').slideUp();    // 收起這個選單
            openedMenuId = "";  // 收起選單後，把 openedMenuId 清空，表示沒有選單展開
        }

        //$('#menuFlag').html(openedMenuId);  // 除錯用的
});

});
</script>

</head>
<body>

<!-- set menu content into this div  -->
<div id="menuContent">
<ul class="bMenuList" id="menuDiv" >
    <li class="bMenuTitle" id="menu1" >
        <span class="oneLevel" >概要資訊</span>
        <ul class="oneLevelUl" id="sub1" >
            <li class="oneLevelLi"><a href="#">概要資訊</a></li>
        </ul>
    </li>
    <li class="bMenuTitle" id="menu2">
        <span class="oneLevel">我的費用</span>
        <ul class="oneLevelUl" id="sub2">
            <li class="oneLevelLi"><a href="#">繳費</a></li>
            <li class="oneLevelLi"><a href="#">繳費記錄查詢</a></li>
        </ul>
    </li>
</ul>
</div>

<!-- keep openedMenuId in this div  -->
<div id="menuFlag" menuId="" ></div>

</body>
</html>

轉載一個 jquery 摺疊展開的選單。在原有基礎上增加了收起選單的效果。

效果：

相關文章