左键菜单js写法

其他 2018-12-10 21:54:44 阅读次数: 0

/左侧菜单点击/
$(".side-menu").on(‘click’, ‘li a’, function(e) {
var animationSpeed = 300;
var $this = $(this);
var checkElement = $this.next();

if (checkElement.is('.menu-item-child') && checkElement.is(':visible')) {
  checkElement.slideUp(animationSpeed, function() {
	checkElement.removeClass('menu-open');
  });
  checkElement.parent("li").removeClass("active");
}
//如果菜单是不可见的
else if ((checkElement.is('.menu-item-child')) && (!checkElement.is(':visible'))) {
  //获取上级菜单
  var parent = $this.parents('ul').first();
  //从父级开始找所有打开的菜单并关闭
  var ul = parent.find('ul:visible').slideUp(animationSpeed);
  //在父级中移出menu-open标记
  ul.removeClass('menu-open');
  //获取父级li
  var parent_li = $this.parent("li");
  //打开菜单时添加menu-open标记
  checkElement.slideDown(animationSpeed, function() {
	//添加样式active到父级li
	checkElement.addClass('menu-open');
	parent.find('li.active').removeClass('active');
	parent_li.addClass('active');
  });
}
//防止有链接跳转
e.preventDefault();

addIframe($this);

});

/添加iframe/
function addIframe(cur){
var $this = cur;
var h = $this.attr(“href”),
m = $this.data(“index”),
label = $this.find(“span”).text(),
isHas = false;
if (h == “” || $.trim(h).length == 0) {
return false;
}

var fullWidth = $(window).width();
if(fullWidth >= 750){
	$(".layout-side").show();
}else{
	$(".layout-side").hide();
}

$(".content-tab").each(function() {
	if ($(this).data("id") == h) {
		if (!$(this).hasClass("active")) {
			$(this).addClass("active").siblings(".content-tab").removeClass("active");
			addTab(this);
		}
		isHas = true;
	}
});
if(isHas){
	$(".body-iframe").each(function() {
		if ($(this).data("id") == h) {
			$(this).show().siblings(".body-iframe").hide();
		}
	});
}
if (!isHas) {
	var tab = "<a href='javascript:;' class='content-tab active' data-id='"+h+"'>"+ label +" <i class='icon-font'>&#xe617;</i></a>";
	$(".content-tab").removeClass("active");
	$(".tab-nav-content").append(tab);
	var iframe = "<iframe class='body-iframe' name='iframe"+ m +"' width='100%' height='99%' src='"+ h +"' frameborder='0' data-id='"+ h +"' seamless></iframe>";
	$(".layout-main-body").find("iframe.body-iframe").hide().parents(".layout-main-body").append(iframe);
	addTab($(".content-tab.active"));
}
return false;

}

/添加tab/
function addTab(cur) {
var prev_all = tabWidth( ( c u r ) . p r e v A l l ( ) ) , n e x t a l l = t a b W i d t h ( (cur).prevAll()), next_all = tabWidth( (cur).nextAll());
var other_width =tabWidth($(".layout-main-tab").children().not(".tab-nav"));
var navWidth = ( &quot; . l a y o u t − m a i n − t a b &quot; ) . o u t e r W i d t h ( t r u e ) − o t h e r w i d t h ; / / 可 视 宽 度 v a r h i d e w i d t h = 0 ; i f ( (&quot;.layout-main-tab&quot;).outerWidth(true)-other_width;//可视宽度 var hidewidth = 0; if ( (".tab-nav-content").width() < navWidth) {
hidewidth = 0
} else {
if (next_all <= (navWidth - $(cur).outerWidth(true) - $(cur).next().outerWidth(true))) {
if ((navWidth - $(cur).next().outerWidth(true)) > next_all) {
hidewidth = prev_all;
var m = cur;
while ((hidewidth - ( m ) . o u t e r W i d t h ( ) ) &gt; ( (m).outerWidth()) &gt; ( (".tab-nav-content").outerWidth() - navWidth)) {
hidewidth -= $(m).prev().outerWidth();
m = $(m).prev()
}
}
} else {
if (prev_all > (navWidth - $(cur).outerWidth(true) - $(cur).prev().outerWidth(true))) {
hidewidth = prev_all - $(cur).prev().outerWidth(true)
}
}
}
$(".tab-nav-content").animate({
marginLeft: 0 - hidewidth + “px”
},
“fast”)
}

/获取宽度/
function tabWidth(tabarr) {
var allwidth = 0;
$(tabarr).each(function() {
allwidth += $(this).outerWidth(true)
});
return allwidth;
}

/左按钮事件/
$(".btn-left").on(“click”, leftBtnFun);
/右按钮事件/
$(".btn-right").on(“click”, rightBtnFun);
/选项卡切换事件/
$(".tab-nav-content").on(“click”, “.content-tab”, navChange);
/选项卡关闭事件/
$(".tab-nav-content").on(“click”, “.content-tab i”, closePage);
/选项卡双击关闭事件/
$(".tab-nav-content").on(“dblclick”, “.content-tab”, closePage);

/左按钮方法/
function leftBtnFun() {
var ml = Math.abs(parseInt( ( &quot; . t a b − n a v − c o n t e n t &quot; ) . c s s ( &quot; m a r g i n − l e f t &quot; ) ) ) ; v a r o t h e r w i d t h = t a b W i d t h ( (&quot;.tab-nav-content&quot;).css(&quot;margin-left&quot;))); var other_width = tabWidth( (".layout-main-tab").children().not(".tab-nav"));
var navWidth = ( &quot; . l a y o u t − m a i n − t a b &quot; ) . o u t e r W i d t h ( t r u e ) − o t h e r w i d t h ; / / 可 视 宽 度 v a r h i d e w i d t h = 0 ; i f ( (&quot;.layout-main-tab&quot;).outerWidth(true)-other_width;//可视宽度 var hidewidth = 0; if ( (".tab-nav-content").width() < navWidth) {
return false
} else {
var tabIndex = $(".content-tab:first");
var n = 0;
while ((n + $(tabIndex).outerWidth(true)) <= ml) {
n += $(tabIndex).outerWidth(true);
tabIndex = KaTeX parse error: Expected 'EOF', got '}' at position 22: …dex).next(); }̲ n = 0; if …(tabIndex).prevAll()) > navWidth) {
while ((n + $(tabIndex).outerWidth(true)) < (navWidth) && tabIndex.length > 0) {
n += $(tabIndex).outerWidth(true);
tabIndex = KaTeX parse error: Expected 'EOF', got '}' at position 23: …ex).prev(); }̲ hidewidth =…(tabIndex).prevAll());
}
}
$(".tab-nav-content").animate({
marginLeft: 0 - hidewidth + “px”
},
“fast”);
}

/右按钮方法/
function rightBtnFun() {
var ml = Math.abs(parseInt( ( &quot; . t a b − n a v − c o n t e n t &quot; ) . c s s ( &quot; m a r g i n − l e f t &quot; ) ) ) ; v a r o t h e r w i d t h = t a b W i d t h ( (&quot;.tab-nav-content&quot;).css(&quot;margin-left&quot;))); var other_width = tabWidth( (".layout-main-tab").children().not(".tab-nav"));
var navWidth = ( &quot; . l a y o u t − m a i n − t a b &quot; ) . o u t e r W i d t h ( t r u e ) − o t h e r w i d t h ; / / 可 视 宽 度 v a r h i d e w i d t h = 0 ; i f ( (&quot;.layout-main-tab&quot;).outerWidth(true)-other_width;//可视宽度 var hidewidth = 0; if ( (".tab-nav-content").width() < navWidth) {
return false
} else {
var tabIndex = $(".content-tab:first");
var n = 0;
while ((n + $(tabIndex).outerWidth(true)) <= ml) {
n += $(tabIndex).outerWidth(true);
tabIndex = $(tabIndex).next();
}
n = 0;
while ((n + $(tabIndex).outerWidth(true)) < (navWidth) && tabIndex.length > 0) {
n += $(tabIndex).outerWidth(true);
tabIndex = KaTeX parse error: Expected 'EOF', got '}' at position 21: …ndex).next() }̲ hidewidth = …(tabIndex).prevAll());
if (hidewidth > 0) {
$(".tab-nav-content").animate({
marginLeft: 0 - hidewidth + “px”
},
“fast”);
}
}
}

/选项卡切换方法/
function navChange() {
if (!$(this).hasClass(“active”)) {
var k = $(this).data(“id”);
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion() { if ((this).data(“id”) == k) {
$(this).show().siblings(".body-iframe").hide();
return false
}
});
$(this).addClass(“active”).siblings(".content-tab").removeClass(“active”);
addTab(this);
}
}

/选项卡关闭方法/
function closePage() {
var url = $(this).parents(".content-tab").data(“id”);
var cur_width = ( t h i s ) . p a r e n t s ( &quot; . c o n t e n t − t a b &quot; ) . w i d t h ( ) ; i f ( (this).parents(&quot;.content-tab&quot;).width(); if ( (this).parents(".content-tab").hasClass(“active”)) {
if ($(this).parents(".content-tab").next(".content-tab").size()) {
var next_url = $(this).parents(".content-tab").next(".content-tab:eq(0)").data(“id”);
$(this).parents(".content-tab").next(".content-tab:eq(0)").addClass(“active”);
KaTeX parse error: Expected '}', got 'EOF' at end of input: …on() { if ((this).data(“id”) == next_url) {
KaTeX parse error: Expected 'EOF', got '}' at position 70: …turn false }̲ }); var …(".tab-nav-content").css(“margin-left”));
if (n < 0) {
$(".tab-nav-content").animate({
marginLeft: (n + cur_width) + “px”
},
“fast”)
}
$(this).parents(".content-tab").remove();
KaTeX parse error: Expected '}', got 'EOF' at end of input: …on() { if ((this).data(“id”) == url) {
KaTeX parse error: Expected 'EOF', got '}' at position 40: …turn false }̲ }) } if…(this).parents(".content-tab").prev(".content-tab").size()) {
var prev_url = $(this).parents(".content-tab").prev(".content-tab:last").data(“id”);
$(this).parents(".content-tab").prev(".content-tab:last").addClass(“active”);
KaTeX parse error: Expected '}', got 'EOF' at end of input: …on() { if ((this).data(“id”) == prev_url) {
$(this).show().siblings(".body-iframe").hide();
return false
}
});
$(this).parents(".content-tab").remove();
KaTeX parse error: Expected '}', got 'EOF' at end of input: …on() { if ((this).data(“id”) == url) {
$(this).remove();
return false
}
})
}
} else {
$(this).parents(".content-tab").remove();
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion() { if ((this).data(“id”) == url) {
KaTeX parse error: Expected 'EOF', got '}' at position 38: …eturn false }̲ }); addTab…(".content-tab.active"))
}
return false
}

/循环菜单/
function initMenu(menu,parent){
for(var i=0; i<menu.length; i++){
var item = menu[i];
var str = “”;
try{
if(item.isHeader == “1”){
str = “

  • ”+item.name+"
    • ";
    $(parent).append(str);
    if(item.childMenus != “”){
    initMenu(item.childMenus,parent);
    }
    }else{
    item.icon == “” ? item.icon = “&#xe610” : item.icon = item.icon;
    if(item.childMenus == “”){
    str = “
  • ”+item.icon+""+item.name+"
    • ";
    $(parent).append(str);
    }else{
    str = “
  • ”+item.icon+""+item.name+“”;
    str +="
    • ";
    $(parent).append(str);
    var childParent = $("#menu-child-"+ item.id);
    initMenu(item.childMenus,childParent);
    }
    }
    }catch(e){}
    }
    }

    /头部下拉框移入移出/
    $(document).on(“mouseenter”,".header-bar-nav",function(){
    $(this).addClass(“open”);
    });
    $(document).on(“mouseleave”,".header-bar-nav",function(){
    $(this).removeClass(“open”);
    });

    /左侧菜单展开和关闭按钮事件/
    KaTeX parse error: Expected '}', got 'EOF' at end of input: …unction(){ if((".layout-side").hasClass(“close”)){
    $(".layout-side").removeClass(“close”);
    $(".layout-main").removeClass(“full-page”);
    $(".layout-footer").removeClass(“full-page”);
    $(this).removeClass(“close”);
    $(".layout-side-arrow-icon").removeClass(“close”);
    }else{
    $(".layout-side").addClass(“close”);
    $(".layout-main").addClass(“full-page”);
    $(".layout-footer").addClass(“full-page”);
    $(this).addClass(“close”);
    $(".layout-side-arrow-icon").addClass(“close”);
    }
    });

    /头部菜单按钮点击事件/
    $(".header-menu-btn").click(function(){
    $(".layout-side").removeClass(“close”);
    $(".layout-main").removeClass(“full-page”);
    $(".layout-footer").removeClass(“full-page”);
    $(".layout-side-arrow").removeClass(“close”);
    $(".layout-side-arrow-icon").removeClass(“close”);

    $(".layout-side").slideToggle();

    });

    /左侧菜单响应式/
    $(window).resize(function() {
    var width = $(this).width();
    if(width >= 750){
    $(".layout-side").show();
    }else{
    $(".layout-side").hide();
    }
    });

    /皮肤选择/
    $(".dropdown-skin li a").click(function(){
    var v = ( t h i s ) . a t t r ( &quot; d a t a − v a l &quot; ) ; v a r h r e f S t r = (this).attr(&quot;data-val&quot;); var hrefStr= ("#layout-skin").attr(“href”);
    var hrefRes=hrefStr.substring(0,hrefStr.lastIndexOf(‘skin/’))+‘skin/’+v+’/skin.css’;
    $(window.frames.document).contents().find("#layout-skin").attr(“href”,hrefRes);

    setCookie("scclui-skin", v);

    });

    /获取cookie中的皮肤/
    function getSkinByCookie(){
    var v = getCookie(“scclui-skin”);
    var hrefStr=$("#layout-skin").attr(“href”);
    if(v == null || v == “”){
    v=“qingxin”;
    }
    if(hrefStr != undefined){
    var hrefRes=hrefStr.substring(0,hrefStr.lastIndexOf(‘skin/’))+‘skin/’+v+’/skin.css’;
    $("#skin").attr(“href”,hrefRes);
    }
    }

    /随机颜色/
    function getMathColor(){
    var arr = new Array();
    arr[0] = “#ffac13”;
    arr[1] = “#83c44e”;
    arr[2] = “#2196f3”;
    arr[3] = “#e53935”;
    arr[4] = “#00c0a5”;
    arr[5] = “#16A085”;
    arr[6] = “#ee3768”;

    var le = $(".menu-item > a").length;
for(var i=0;i<le;i++){
	var num = Math.round(Math.random()*5+1);
	var color = arr[num-1];
	$(".menu-item > a").eq(i).find("i:first").css("color",color);
}

    }

    /*
    初始化加载
    */
    $(function(){
    /获取皮肤/
    //getSkinByCookie();

    /*菜单json*/
var menu = [{"id":"1","name":"主菜单","parentId":"0","url":"","icon":"","order":"1","isHeader":"1","childMenus":[
				{"id":"3","name":"商品管理","parentId":"1","url":"","icon":"&#xe604;","order":"1","isHeader":"0","childMenus":[
					{"id":"4","name":"品牌管理","parentId":"3","url":"test1.html","icon":"","order":"1","isHeader":"0","childMenus":""},
					{"id":"5","name":"分类管理","parentId":"3","url":"test2.html","icon":"","order":"1","isHeader":"0","childMenus":""}
				]},
				{"id":"6","name":"订单管理","parentId":"1","url":"","icon":"&#xe602;","order":"1","isHeader":"0","childMenus":[
					{"id":"7","name":"已付款","parentId":"6","url":"home3.html","icon":"","order":"1","isHeader":"0","childMenus":""},
					{"id":"8","name":"未付款","parentId":"6","url":"home4.html","icon":"","order":"1","isHeader":"0","childMenus":""}
				]}
			]},
			{"id":"2","name":"框架案例","parentId":"0","url":"","icon":"","order":"2","isHeader":"1","childMenus":[
				{"id":"9","name":"新功能","parentId":"2","url":"","icon":"","order":"1","isHeader":"0","childMenus":""},
				{"id":"10","name":"多级","parentId":"2","url":"","icon":"","order":"1","isHeader":"0","childMenus":[
					{"id":"11","name":"一级","parentId":"10","url":"","icon":"","order":"1","isHeader":"0","childMenus":""},
					{"id":"12","name":"一级","parentId":"10","url":"","icon":"","order":"1","isHeader":"0","childMenus":[
						{"id":"13","name":"二级","parentId":"12","url":"","icon":"","order":"1","isHeader":"0","childMenus":""},
						{"id":"14","name":"二级","parentId":"12","url":"","icon":"","order":"1","isHeader":"0","childMenus":[
							{"id":"15","name":"三级","parentId":"14","url":"","icon":"","order":"1","isHeader":"0","childMenus":""},
							{"id":"16","name":"三级","parentId":"14","url":"","icon":"","order":"1","isHeader":"0","childMenus":[
								{"id":"17","name":"四级","parentId":"16","url":"","icon":"","order":"1","isHeader":"0","childMenus":""},
								{"id":"18","name":"四级","parentId":"16","url":"","icon":"","order":"1","isHeader":"0","childMenus":""}
							]}
						]}
					]}
				]}
			]}
			];
initMenu(menu,$(".side-menu"));
$(".side-menu > li").addClass("menu-item");

/*获取菜单icon随机色*/
//getMathColor();

    });

    猜你喜欢

    转载自blog.csdn.net/anhldd/article/details/84630856
    今日推荐
    面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
    开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
    中国码农的“35岁魔咒”
    蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
    Arc Browser for Windows 1.0 正式 GA
    90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
    周排行
    【转】spring中对控制反转和依赖注入的理解
    tms webcore 安装和使用
    java程序员进阶相关书籍
    SpringMVC接受请求参数、
    如何保存训练好的机器学习模型
    MyEclipse、Eclipse设置项目JDK的三个地方
    商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
    Markdown编辑器语言——30分钟入门到到精通
    Linux系统下MongoDB的简单安装与基本操作
    Power Strings
    每日归档
    更多
    2024-05-07(14)
    2024-05-06(40)
    2024-05-05(0)
    2024-05-04(7)
    2024-05-03(19)
    2024-05-02(0)
    2024-05-01(4)
    2024-04-30(1)
    2024-04-29(40)
    2024-04-28(0)

    代码天地 © 2018 codetd.com

    境外服务器   最新电视剧2022