您的位置:首页 > Web前端 > JQuery

jquery实现折叠式(手拉风琴)菜单

2016-01-27 11:01 585 查看
先贴个效果图,目前测试过的浏览器:IE8及以上,chrome,Firefox,360运行通过

dom结构:

<div class="xybNav">
        <div class="xybNavContent">
            <div class="xybNavOneList">
                <h3>主菜单1</h3>
            </div>
        </div>
        <div class="xybNavContent">
            <div class="xybNavOneList">
                <h3>主菜单2</h3>
            </div>
            <div class="xybNavTwoList" show="close">
                <ul class="xybNavUl">
                    <li class="twoLsit_e">子菜单1</li>
                    <li class="twoLsit_e">子菜单2</li>
                </ul>
            </div>
        </div>
    </div>


css:

.xybNav {
    width: 100%;
    overflow:auto;
}

.xybNavUl {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    margin-left: 10px;
}

.xybNavUl li {
    padding: 10px;
    font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif;
    color: #ddd;
    font-size:12px;
    max-width:150px;
    _width:150px;
    overflow:auto;
}

.xybNavUl li:hover {
    cursor: pointer;
    background-color: #0094ff;
}

.xybNavOneList h3 {
    font-size: 14px;
    color: #fff;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
    margin-left:10px;
    color: #ddd;
    font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif;
}
.xybNavOneList:hover {
    background-color: #0094ff;
    cursor: pointer;
}

.xybNavTwoList {
    padding: 15px;
    display: none;
}


js:

//-----------------------------ie动态Hover-------------------------
    if (!$.support.leadingWhitespace) {
        $(document).on("mouseover", ".xybNavUl li", function () {
            $(this).css({ "cursor": "pointer", "background-color": "#0094ff" });
        });
        $(document).on("mouseout", ".xybNavUl li", function () {
            $(this).css("background-color", "");
        });
        $(document).on("mouseover", ".xybNavOneList", function () {
            $(this).css({ "cursor": "pointer", "background-color": "#0094ff" });
        });
        $(document).on("mouseout", ".xybNavOneList", function () {
            $(this).css("background-color", "");
        });
    }
    //-----------------------------ie动态Hover--end-----------------------


//点击一级列表
    $(document).on("click", ".xybNavOneList", function () {
        $(".xybNavOneList").each(function () {
            $(this).css({ "border-right": "none", "background-color": "" });
        });
        $(this).next(".xybNavTwoList").children(".xybNavUl").children(".twoLsit_e").css({ "border-right": "none", "background-color": "" });
        $(this).css({ "border-right": "4px solid #0bf7b6", "background-color": "#0094ff" });
        var id = $(this).attr("id");

        //--------------------------------侧边导航栏----------------------------
        if ($(this).next(".xybNavTwoList").attr("show") == "close") {
            $(".xybNavOneList").each(function () {
                if ($(this).next(".xybNavTwoList").attr("show") == "open") {
                    $(this).next(".xybNavTwoList").attr("show", "close");
                    $(this).css({ "border-right": "none", "background-color": "" });
                    $(this).next(".xybNavTwoList").hide();
                }
                else if ($(this).next(".xybNavTwoList").attr("show") == undefined) {
                    $(this).css({ "border-right": "none", "background-color": ""});
                }
            });
            $(this).next(".xybNavTwoList").attr("show", "open");
            $(this).next(".xybNavTwoList").show(500);
        }
        else if ($(this).next(".xybNavTwoList").attr("show") == "open") {
            $(this).next(".xybNavTwoList").attr("show", "close");
            $(this).next(".xybNavTwoList").hide(500);
        }
        else if ($(this).next(".xybNavTwoList").attr("show") == undefined) {
            $(".xybNavOneList").each(function () {
                if ($(this).next(".xybNavTwoList").attr("show") == "open" || $(this).next(".xybNavTwoList").attr("show") ==undefined ) {
                    //$(this).css({ "border-right": "none", "background-color": "" });
                    $(this).next(".xybNavTwoList").attr("show", "close");
                    $(this).next(".xybNavTwoList").hide();
                }
            });
            //$(this).css({ "border-right": "4px solid #0bf7b6", "background-color": "#0094ff" });
        }
        //--------------------------------侧边导航栏--end--------------------------
    });


//点击二级列表
    $(document).on("click", ".twoLsit_e", function () {
        //alert($(this).attr("data-id"));
        var li = $(this).parent(".xybNavUl").children("li");
        $.each(li, function () {
            $(this).css({ "border-right": "none", "background-color": "" });
        });
        $(this).css({"border-right": "4px solid #0bf7b6", "background-color": "#0094ff"});
    });
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: