菜單欄展開和收起效果(純js)

2014年6月25日 15:36:29

需要關注的是: 

1.用cookie保存用戶當前點擊的菜單項,不打擾后端代碼

2.通過數學計算得到要顯示和隱藏的div

3.點擊事件是動態綁定到a標簽上的,因此當dom加載完后,再執行js,也就是寫在onload里

HTML如下:

<h3 class="titleH3" id="101">aaaa</h3>
<div class="subNav" id="1">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
</div>
<h3 class="titleH3" id="102">bbbb</h3>
<div class="subNav" id="2">
    <a href="#">11</a>
    <a href="#">22</a>
    <a href="#">33</a>
</div>

js如下:

function showhide()
{
    //綁定a鏈接的點擊事件
    //點擊a鏈接的時候將id寫進cookie
    var arrSubNav = document.getElementsByClassName('subNav');
    for (var i = 0; i < arrSubNav.length; i++) {
        var arrHref = arrSubNav[i].getElementsByTagName('a');
        for (var j = 0; j < arrHref.length; j++) {
            arrHref[j].onclick = function () {
                var nodeParent = this.parentNode; //獲取a鏈接所在的那個div塊兒的id,注意,此處用this
                var idParent = nodeParent.getAttribute('id');
                document.cookie="userCheck="+idParent+";domain=***.***.com;path=/***"; //用cookie記錄下用戶當前的選擇
            }
        }
    }

    //從cookie里取值,展開指定div
    userCheck = getUserCheckInfo();
    if (userCheck > 0) {
        for (var i = 0; i < arrSubNav.length; i++ ) {
            arrSubNav[i].style.display = 'none';
        }
        document.getElementById(userCheck).style.display = 'block';
    } else {
        document.getElementById('3').style.display = 'block';
    }

    //點擊標題時展開其下的菜單
    var arrTitle = document.getElementsByClassName('titleH3');
    for (var i = 0; i < arrTitle.length; i++) {
        arrTitle[i].onclick = function () {
            var idTitle = this.getAttribute('id');
            var idSubNav = idTitle % 100; //根據title的id獲取子菜單div的id
            
            for (var i = 0; i < arrSubNav.length; i++ ) {
                arrSubNav[i].style.display = 'none';
            }
            document.getElementById(idSubNav).style.display = 'block';

        }
    };
}

function getUserCheckInfo()
{
    var strCookie = document.cookie;
    //將多cookie切割為多個名/值對 
    var arrCookie=strCookie.split("; "); 
    var userCheck = '0'; 
    //遍歷cookie數組，處理每個cookie對 
    for(var i=0;i<arrCookie.length;i++) { 
        var arr=arrCookie[i].split("="); 
        if("userCheck"==arr[0]){ 
            userCheck=arr[1]; 
            break; 
        } 
    } 
    return userCheck;
}

 變量名沒有起好,userCheck應該為userChoice或者userSelected更恰當,他是用來保存用戶點擊的菜單的id的