[原创] 手风琴菜单

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #subView body,ul,li{margin: 0 auto;padding: 0;font-family: 'Microsoft Yahei',Arial, sans-serif}
    #subView ul,#subView li{list-style-type: none;cursor: pointer;color: black;line-height: 38px;text-align: center;}
    #subView ul{width: 248px;}
    #subView ul span{background-color: #EDEDED;color: #717070;display: block;font-size: 14px;border-bottom: 1px solid #ccc;    text-align: left;}
    #subView ul span:hover{background-color: #07bc6e;color: white}

    #subView .ulSelected{background-color: #07bc6e !important;color: white !important}
    #subView .liSelected{background-color: #07bc6e !important;color: white !important}

    #subView ul span p{margin-left: 20%;padding: 0px}

    #subView li{background-color: #d0d0d0;display: none;}
    #subView li:hover{background-color: #89d8b6;}
    #subView li p{text-align: left;margin-left: 25%;padding: 0px}
    #subView b{display: inline;float: right;padding-right: 10px;}
    li{width: 200px;}

</style>
<script type="text/javascript" src="../jquery.1.10.js"></script>
</head>
<body>
    <div class="subView" id=subView>
        <ul id="ambu_check">
            <span><p>安保检查</p></span>
            <li data-url="/sysweb/taskmanage/ambucheck/newambucheck.action" ><p>添加检查</p></li>
            <li data-url="/sysweb/taskmanage/ambucheck/ambucheckrecord.action"><p>安保检查记录</p></li>
        </ul>
        <ul id="selfServer_check">
            <span><p>自助服务区检查</p></span>
            <li data-url="/sysweb/taskmanage/selfservercheck/newSelfServerCheck.action"><p>添加检查</p></li>
            <li data-url="/sysweb/taskmanage/selfservercheck/selfServerRecord.action"><p>自助服务区检查记录</p></li>
        </ul>
        <ul id="selfDevice_check">
            <span><p>自助设备检查</p></span>
            <li data-url="/sysweb/taskmanage/selfdevicecheck/newSelfDeviceCheck.action"><p>添加检查</p></li>
            <li data-url="/sysweb/taskmanage/selfdevicecheck/selfDeviceRecord.action"><p>自助设备检查记录</p></li>
        </ul>
        <ul id="safeDevice_check">
            <span><p>安全设施检查</p></span>
            <li data-url="/sysweb/taskmanage/safedevicecheck/newSafeDeviceCheck.action"><p>添加检查</p></li>
            <li data-url="/sysweb/taskmanage/safedevicecheck/safeDeviceRecord.action"><p>安全设施检查记录</p></li>
        </ul>
        <ul id="alarmSys_check">
            <span><p>报警系统测试检查</p></span>
            <li data-url="/sysweb/taskmanage/alarmsystemcheck/newAlarmSystemCheck.action"><p>添加检查</p></li>
            <li data-url="/sysweb/taskmanage/alarmsystemcheck/alarmSystemRecord.action"><p>报警系统测试检查记录</p></li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    $(function(){
         $("ul > span").bind("click",function(){
                if($(this).hasClass("ulSelected")){
                    return
                }

                if($(this).siblings('li').hasClass('on')){
                    $(this).siblings('li').slideUp(50).removeClass('on');
                }else{
                    $(this).siblings('li').slideDown(50).addClass('on');
                }
                var spanArray = $("ul > span");
                for (var i = spanArray.length - 1; i >= 0; i--) {

                    if($(spanArray[i]).hasClass("ulSelected") && $(spanArray[i])[0] !== $(this)[0]){
                        $(spanArray[i]).removeClass("ulSelected");
                        $(spanArray[i]).siblings('li').slideUp(50).removeClass('on').removeClass('liSelected');

                    }
                }
                if(!$(this).hasClass("ulSelected")){
                    $(this).addClass("ulSelected");
                    $(this).siblings("li:first").click()
                }
            })


            $("ul > li").bind("click",function(){
                var liArray = $("ul > li");
                //var liUrl = $(this).data('url');
                for (var i = liArray.length - 1; i >= 0; i--) {
                    if($(liArray[i]).hasClass("liSelected")){
                            $(liArray[i]).removeClass("liSelected");
                    }
                }

                if(!$(this).hasClass("liSelected")){
                    $(this).addClass("liSelected");
                }
                //$("#main-wrap").load(liUrl);
            })

            $("ul > span:first").click()
    })
</script>
</html>
样式简单,但是可以自己调,功能基本完成,如果需要自己添加也能稍作修改就能使用,因为自己的项目需要兼容ie8,使用多个插件貌似都有点问题,于是简单的写了一个.
[原创] 手风琴菜单

猜你喜欢
