伸缩导航及页面伸缩

提要：在我们写项目的时候，往往会涉及到伸缩导航这么一个操作，类似下图

本功能是基于html+jquery实现的

HTML代码如下：

<div class="map-nav">
    <div class="map-change-side"><i class="iconfont icon-view-list-o map-change-sideIcon"></i></div>
    <ul class="map-nav-list">
        <li class="map-treeview">
            <a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
                <i class="iconfont icon-diqiu1 map-sidebar-icon"></i>
                <span>基础</span>
                <i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
            </a>
            <ul class="map-second-nav">
                <!--<li>初始加载</li>-->
                <!--<li>mapBox底图</li>-->
                <li ui-sref='map'>Arcgis</li>
                <li ui-sref='mapgaode'>高德</li>
                <!--<li>superMap底图</li>-->
            </ul>
        </li>
        <li class="map-treeview">
            <a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
                <i class="iconfont icon-tuceng map-sidebar-icon"></i>
                <span>Layer控制</span>
                <i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
            </a>
            <ul class="map-second-nav">
                <li ui-sref='basemapchange'>底图切换</li>
                <li ui-sref='mapchange'>图层切换</li>
            </ul>
        </li>
        <li class="map-treeview">
            <a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
                <i class="iconfont icon-xiazai18 map-sidebar-icon"></i>
                <span>地图要素</span>
                <i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
            </a>
            <ul class="map-second-nav">
                <li ui-sref='mapinfo'>弹出层</li>
                <li ui-sref='mapinfocustom'>自定义弹出层</li>
                <li ui-sref='mapfeature'>基础要素</li>
                <li ui-sref='maplonlat'>获取经纬度</li>
                <!--<li ui-sref='mapmarker'>自定义Marker</li>-->
            </ul>
        </li>
        <li class="map-treeview">
            <a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
                <i class="iconfont icon-sousuo map-sidebar-icon"></i>
                <span>搜索</span>
                <i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
            </a>
            <ul class="map-second-nav">
                <li ui-sref='basemapsearch'>基础搜索</li>
            </ul>
        </li>
        <li class="map-treeview">
            <a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
                <i class="iconfont icon-icon map-sidebar-icon"></i>
                <span>统计分析</span>
                <i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
            </a>
            <ul class="map-second-nav">
                <li ui-sref="mappath">路径规划</li>
                <li ui-sref="mapheat">热点统计</li>
                <li>地图图表</li>
                <li ui-sref="maprender">属性分析</li>
                <li ui-sref='maprectsearch'>框选分析</li>
                <li ui-sref='mappointsearch'>点选分析</li>
            </ul>
        </li>
        <li class="map-treeview">
            <a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
                <i class="iconfont icon-shezhigongjutianjia map-sidebar-icon"></i>
                <span>工具</span>
                <i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
            </a>
            <ul class="map-second-nav">
                <li ui-sref='mapgraphic'>绘制矢量要素</li>
                <li ui-sref='maptools'>地图量算</li>
                <li ui-sref='mapprint'>地图打印(web)</li>
                <li ui-sref='mapprintser'>地图打印(server)</li>
            </ul>
        </li>
        <li class="map-treeview">
            <a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
                <i class="iconfont icon-changyongshili map-sidebar-icon"></i>
                <span>业务操作</span>
                <i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
            </a>
            <ul class="map-second-nav">
                <li ui-sref="mappoint">封装数据画点</li>
                <!--<li ui-sref="mapconstructor">封装版框选查询</li>-->
                <li ui-sref="mapmarkerinfo">封装版绘点弹窗</li>
                <li ui-sref="mapattrsearch">属性查询</li>
                <!--<li ui-sref="mapfeaturelayer">图层属性点击</li>-->
                <!--<li ui-sref="mapconstructor">封装代码测试</li>-->
            </ul>
        </li>
    </ul>
</div>

css代码如下：

.map-treeview {
    position: relative;
}
.map-sidebar-toggle {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 17px;
    box-sizing: border-box;
    overflow: hidden;
}
.map-sidebar-toggle:hover {
    background: rgba(255,255,255,.1);
}
.map-sidebar-icon {
    margin-right: 10px;
}
.map-sidebar-Ricon {
    float: right;
    margin-right: 10px;
    transform: rotate(90deg);
}
.map-sidebar-RiconChange {
    transform: rotate(180deg);
    transition: all .3s;
}
.map-sidebar-active {
    /**/
    background: rgba(255,255,255,.1);
}
.map-second-nav {
    display: none;
    background-color: #26303C;
    z-index: 9999;
}
.map-second-smallNav {
    position: absolute;
    top:0;
    left:50px;
    width:200px;
}
.map-second-nav>li {
    min-height: 40px;
    line-height: 40px;
    cursor: pointer;
}
.map-second-nav>li:hover {
    background: rgba(255,255,255,.1);
}
.viewWrap {
    height: 100%;
}

JS代码如下：

/*左侧导航部分*/
var flag = true;
var flexFlag = true;
$(".map-sidebar-toggle").click(function(){
    var slideWidth = $(".map-aside").width();
    if(Number(slideWidth) != 50){
        $(".map-treeview").unbind("mouseenter").unbind("mouseleave");
        $(".map-second-nav").removeClass("map-second-smallNav").unbind("mouseenter").unbind("mouseleave");
        $(this).children(".map-sidebar-Ricon").addClass("map-sidebar-RiconChange").parent().parent().siblings().children(".map-sidebar-toggle").children(".map-sidebar-Ricon").removeClass("map-sidebar-RiconChange");
        $(this).attr("showId",1).addClass("map-sidebar-active").parent().siblings().children(".map-sidebar-toggle").attr("showId",0).removeClass("map-sidebar-active");
        // $(this).siblings(".map-second-nav").slideDown().parent().siblings().children(".map-second-nav").slideUp();
        // $(this).siblings(".map-second-nav").children("li").removeClass("map-sidebar-active");

        if(flexFlag){
            $(this).siblings(".map-second-nav").stop().slideDown().parent().siblings().children(".map-second-nav").stop().slideUp();
            $(this).siblings(".map-second-nav").children("li").removeClass("map-sidebar-active");
            $(this).attr("flexShow","1");
            $(this).parent().siblings().children(".map-sidebar-toggle").attr("flexShow","0");
            flexFlag = false;
            return;
        }else{
            $(this).parent().siblings().children(".map-sidebar-toggle").attr("flexShow","0");
            if($(this).attr("flexShow") == "1"){
                $(this).siblings(".map-second-nav").stop().slideUp();
                $(this).children(".map-sidebar-Ricon").removeClass("map-sidebar-RiconChange");
            }else{
                $(this).attr("flexShow","1");
                $(this).parent().siblings().children(".map-sidebar-toggle").attr("flexShow","0");
                $(this).siblings(".map-second-nav").stop().slideDown().parent().siblings().children(".map-second-nav").stop().slideUp();
                $(this).siblings(".map-second-nav").children("li").removeClass("map-sidebar-active");
                flexFlag = false;
                return;
            };
            flexFlag = true;
            return;
        };

    };
});
$(".map-change-side").click(function () {
    var sideWidth = $(".map-aside").width();
    var clientWidth = $(".mapView").width();
    if(sideWidth == 230){
        $("#leafletMap").css("width",(clientWidth+180)+"px");
    }else{
        $("#leafletMap").css("width",(clientWidth-180)+"px");
    };
    // m.invalidateSize(true);//重载地图；
    /*更改地图大小代码(兼容IE)*/
    var event = document.createEvent('Event');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
    /*更改地图大小代码(不兼容IE)*/
    // ev = new Event("resize", {"bubbles":true, "cancelable":false});
    // setTimeout(function(){
    //     document.dispatchEvent(new Event("resize", {"bubbles":true, "cancelable":false}));
    // },1000);
    $(".map-second-nav").removeClass("map-second-smallNav").unbind("mouseenter").unbind("mouseleave");
    $(".map-treeview").unbind("mouseenter").unbind("mouseleave");
    $(".map-second-nav").stop().slideUp();
    $(".map-sidebar-toggle").children(".map-sidebar-Ricon").removeClass("map-sidebar-RiconChange");
    if(flag){
        $(".map-aside").animate({width:"50px"},500);
        $(".map-mainWrap").animate({left:"50px"},500);
        $(".map-sidebar-toggle").siblings(".map-second-nav").stop().slideUp();
        $(".map-treeview").bind("mouseenter",function(){
            var sideWidth = $(".map-aside").width();
            if(Number(sideWidth) == 50){
                $(this).children(".map-second-nav").css("display","block").addClass("map-second-smallNav")
                    .parent().siblings().children(".map-second-nav").css("display","none").removeClass("map-second-smallNav");
                $(this).children(".map-second-nav").bind("mouseenter",function(){
                    $(this).siblings(".map-sidebar-toggle").addClass("map-sidebar-active");
                });
                $(this).children(".map-second-nav").bind("mouseleave",function(){
                    $(this).siblings(".map-sidebar-toggle").removeClass("map-sidebar-active");
                    $.each($(".map-sidebar-toggle"),function(i,v){
                        var judgeShow = $(".map-sidebar-toggle").eq(i).attr("showId");
                        if(judgeShow == 1){
                            $(".map-sidebar-toggle").eq(i).addClass("map-sidebar-active");
                        };
                    })
                });
            }else{
                $.each($(".map-sidebar-toggle"),function(i,v){
                    if(v.className.indexOf("map-sidebar-active")> -1){
                        $(v).siblings(".map-second-nav").show();
                    };
                });
            };
        })
        $(".map-treeview").bind("mouseleave",function(){
            $(".map-second-nav").hide();
        })
        flag = false;
    }else{
        $(".map-aside").animate({width:"230px"},500);
        $(".map-mainWrap").animate({left:"230px"},500);
        $.each($(".map-sidebar-toggle"),function(i,v){
            if(v.className.indexOf("map-sidebar-active")> -1){
                $(v).attr("flexShow","1");
                $(v).parent().siblings().children(".map-sidebar-toggle").attr("flexShow","0");
                $(v).siblings(".map-second-nav").stop().slideDown();
                $(v).children(".map-sidebar-Ricon").addClass("map-sidebar-RiconChange");
            };
        });
        flag = true;
        flexFlag = false;
    };
});
/*子菜单操作*/
$(".map-second-nav>li").click(function(){
    $(this).siblings().removeClass("map-sidebar-active");
    $(this).addClass("map-sidebar-active").parent().siblings(".map-sidebar-toggle").attr("showId",1)
        .addClass("map-sidebar-active").parent().siblings()
        .children(".map-sidebar-toggle").attr("showId",0).removeClass("map-sidebar-active").siblings(".map-second-nav").children("li").removeClass("map-sidebar-active");
});

注意：

我们希望在左侧导航变化的时候，右侧主体内容部分大小也要随之改变，在响应式布局时，不用设置具体参数，主体部分自然会进行收缩，但涉及到例如地图变化，这类没有主动变化的内容时，我们需要对右侧部分进行处理，可以在操作时加入以下代码：（该代码的主要功能是主动监听主题内容的变化，并重置resize）

/*更改主题内容大小代码(不兼容IE)*/
var ev = new Event("resize", {"bubbles":true, "cancelable":false});
setTimeout(function(){
    document.dispatchEvent(new Event("resize", {"bubbles":true, "cancelable":false}));
},1000);

/*更改主体内容大小代码(兼容IE)*/
var event = document.createEvent('Event');
event.initEvent('resize', true, false);
window.dispatchEvent(event);