提要：在我們寫項目的時候，往往會涉及到伸縮導航這么一個操作，類似下圖

?

?

本功能是基于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);

?

轉載于:https://www.cnblogs.com/jiangze-blog/p/8980817.html

總結

以上是生活随笔為你收集整理的伸缩导航及页面伸缩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。