使用jquery的N级扩展菜单

时间：2015-03-27 16:59:45

标签： javascript jquery menu mouseenter

首先，我是网站开发的新手，但这不是我经常需要做的事情。 因此，我创建了一个使用javascript对象动态创建扩展菜单的离线网站。 javascript对象通过带有宏的excel文件进​​行维护。 （请不要问为什么）。以下是我试图实现的条件：

    当用户将鼠标悬停在包含javascript对象名称的隐藏部分的链接上时，

  • 必须生成一个新菜单，该对象具有创建下一个菜单的信息（请参阅javascript中的测试变量）

    < / LI>

  • 一旦鼠标在一个菜单部分中移动时离开，必须删除链接上的突出显示。当鼠标在菜单结构中向前移动时必须高亮显示。

  • 如果用户在菜单结构中向后移动，则删除用户从DOM留下的菜单。

  • 不使用服务器端脚本。所有脚本必须在客户端运行

  • 菜单应有效至n级。

问题：我似乎无法删除javascript并正确添加DOM中的菜单。代码似乎无法区分菜单中的垂直遍历和水平遍历。在尝试几乎所有事情后，我不确定如何修复脚本。

＆＃13;
＆＃13; 
/* ---------------------------------------- <Test Variables> ----------------------------------------*/

var mainMenu = {
	"It was a":"something",
	"bright cold":"something2",
	"day in April,":"something",
	"and the clocks":"something2",
	"were":"something",
	"striking":"something2",
	"thirteen":"something",
	"-1984":"something",
	};

var something = {
	"My name is":"something2",
	"Inigo Montoya":"something.html",
	"you killed":"something2",
	"my father":"something.html",
	"prepare":"something2",
	"to die":"something2",
}

var something2 = {
	"These":"something",
	"are not":"something.html",
	"the menu":"something",
	"items":"something.html",
	"you":"something",
	"are":"something",
	"looking for":"something",
	"-Jedi Mind Tricks":"mainMenu",
}


/* ------------------------------------ <Main Function Definition> ----------------------------------*/
var existIndex = [];

var testmain = function() {
	//initiate Vairables
	var currentLink = [];
	var previousLink = [];
	var currentSection = [];
	var previousSection = [];
	var activeLinks = [];
	var activeSections = [];
	var sectionLevel = 0;
	//create the main menu
	makeMainMenu(mainMenu);
	//Execute on mouse entering link
	$("body").on("mouseenter",".menu a",function(){
		currentLink = $(this);
		currentSection = currentLink.closest("div");
		if (activeLinks.length==0){ //initiation of variables and lists
			activeLinks.push(currentLink);
			activeSections.push(currentSection);
			previousSection = currentSection;
		}
		if (!(currentSection.is(previousSection)) && //user moved backward
			chkSectionExist(currentSection,activeSections)){ //section has been visited
			sectionLevel = existIndex; //set section level
			var initialSections = activeSections;
			activeSections.splice(existIndex+1,activeSections.length-existIndex-1); //remove old secions
			remLinkBkgrd(activeLinks,sectionLevel); //remove background from old links
			activeLinks.splice(sectionLevel,activeLinks.length-sectionLevel+1); //remove old links
			delOldMenus(initialSections,activeSections) //remove abandoned sections from DOM
			activeLinks.push(currentLink); //add current link
			makeNewMenu(currentLink); //generate new menu
			console.log("backwards")
		}
		else if(!(currentSection.is(previousSection)) && //user moved forward
			!(chkSectionExist(currentSection,activeSections))){ //section has not been visited
			activeSections.push(currentSection); //add the new section
			sectionLevel++; //section level increased by 1
			activeLinks.push(currentLink); //add current link
			makeNewMenu(currentLink); //add new created menu
			console.log("forwards")
		}
		else if(currentSection.is(previousSection)){//traversing links within section
			activeLinks[activeLinks.length-1].css("background-color","transparent");
			activeLinks.pop(); //remove last entry
			activeLinks.push(currentLink); //add new current link
			makeNewMenu(currentLink); //add new created menu
			console.log("stay");
			//$("body div:nth-last-child(2)").remove();
		}
		else{
			console.log("use case in section is unexpected");
		}
		updateLinkCSS(activeLinks)
	});
	$("body").on("mouseleave",".menu a",function(){//Execute on mouse leaving link
		previousLink = $(this)//remember previous link hovered
		previousSection = previousLink.closest("div");//remember previous section hovered
	});
};
$(document).ready(testmain)

/* --------------------------------- <Helper Function Definitions> -----------------------------------*/

/*Checks if section already exists in list of active sections.
returns true if section exists and gives it's index in activeSections list*/
var chkSectionExist = function(toCheck,list){
	var tempArray = [];
	$.each(list,function(index,value){
		if(toCheck.is(value)){
			tempArray.push(true);
		}else{
			tempArray.push(false);
		};
	});
	if (tempArray.indexOf(true)!=-1){
		existIndex=tempArray.indexOf(true);
		return true;
	}else{
		return false;
	};
};

/*Highlights links in activeLinks list */
var updateLinkCSS = function(listOfLinks){
	$.each(listOfLinks,function(index,link){
		link.css("background-color","#09F");
	});
};

/*Removes highlight on inactive links in activeLinks list
beginning with startIdx*/
var remLinkBkgrd = function(listOfLinks,startIdx){
	for (i=startIdx; i<listOfLinks.length; i++){
		listOfLinks[i].css("background-color","transparent");
	};
};

/*Creates a new menu div and list*/
var makeNewMenu = function(currentHover,flag){
	var tempStr = [];
	var i = 0;
	if (currentHover.children("span.hidden-div")[0]){ //menu has hidden section. Create menu.
		menuListing = currentHover.children("span.hidden-div").text();
		var things = Object.getOwnPropertyNames(eval(menuListing));
		tempStr[i++] = "<div class='menu-lvl2 menu'> <ul class='menu-list-lvl2'>";
		for (a=0; a<things.length; a++){
			tempStr[i++] = "<li class='list-item-lvl2'>";
			item = eval(menuListing)[things[a]];
			if (item.toLowerCase().indexOf(".html") >= 0){
				//then set href location = /item.html
				tempStr[i++] = "<a href='/"+item+"'>";
				tempStr[i++] = "<div class='menu-icon-lvl2'></div>";
				tempStr[i++] = "<span class='item-name-lvl2'>"+things[a]+"</span>";
				tempStr[i++] = "</a>";
			}else{
				tempStr[i++] = "<a href='#'>";
				tempStr[i++] = "<div class='menu-icon-lvl2'></div>";
				tempStr[i++] = "<span class='item-name-lvl2'>"+things[a]+"</span>";
				tempStr[i++] = "<span class='hidden-div' style='display:none'>"+item+"</span>";
				tempStr[i++] = "</a>";
				//create <span class="hidden-div" style={display:none}
			}
			tempStr[i++] = "</li>";
		}
		tempStr[i++] = "</ul> </div>";
		currentHover.css("background-color","red")
	}else{
		//current hovered link does not have a hidden section. No menu to be created.
		console.log("menu creation skipped");
	};
	html2insert = $(tempStr.join(' '));
	(html2insert).insertBefore($("footer"));
};

/*Delete old div and children*/
var delOldMenus = function(priorList,currentList){
	//get list of all sections and remove everything that's not on activeList
	var lengthDiff = (priorList.length-currentList.length);
	for (i=lengthDiff; i<priorList.length; i++){
		priorList[i].remove();
	}
};

/*Makes the main menu*/
var makeMainMenu = function(menuListing){
	var tempStr = [];
	var i = 0;
	var things = Object.getOwnPropertyNames(eval(menuListing));
	tempStr[i++] = "<div class='main-menu menu'> <ul class='menu-list'>";
	for (a=0; a<things.length; a++){
		tempStr[i++] = "<li class='list-item'>";
		item = menuListing[things[a]];
		if (item.toLowerCase().indexOf(".html") >= 0){
			//then set href location = /item.html
			tempStr[i++] = "<a href='/"+item+"'>";
			tempStr[i++] = "<div class='menu-icon'></div>";
			tempStr[i++] = "<span class='item-name'>"+things[a]+"</span>";
			tempStr[i++] = "</a>";
		}else{
			tempStr[i++] = "<a href='#'>";
			tempStr[i++] = "<div class='menu-icon'></div>";
			tempStr[i++] = "<span class='item-name'>"+things[a]+"</span>";
			tempStr[i++] = "<span class='hidden-div' style='display:none'>"+item+"</span>";
			tempStr[i++] = "</a>";
			//create <span class="hidden-div" style={display:none}
		}
		tempStr[i++] = "</li>";
	}
	tempStr[i++] = "</ul> </div>";
	html2insert = $(tempStr.join(' '));
	(html2insert).insertBefore($("footer"));
};
＆＃13; 
/*Introduction & Imports */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
	font-family: 'Open Sans', sans-serif;
	margin:0px;
}
header {
	display:inline-block;
	width: 100%;
	height:85px;
	line-height:30px;
	background-color:black;
	color: white;
	text-align: center;
	font-size:20px;
}

/* Main Menu */
.main-menu{
	display:block;
	height:100vh;
	background-color:#CCC;
	float:left;
	clear:both;
}
.menu-list {
	padding:0px;
	padding-top:5px;
	margin:0px;
}
.list-item {
	display:table;
	border-collapse:collapse;
}
.list-item:hover {
	background-color:#09F;
}
.list-item>a {
	display:table-cell;
	text-decoration:none;
	width:230px;
	height:40px;
	border-collapse:collapse;
	vertical-align:middle;
	line-height:32px;
	padding-left:10px;
}
a:visited {
	color:black;
}
.menu-icon {
	display:table-cell;
	width:32px;
	background-color:#696;
	border-radius:4px;
}
.item-name {
	font-size:20px;
	display:table-cell;
	padding-left:15px;
}

/* Menu Level 2 */
.menu-lvl2 {
	display:block;
	float:left;
	height:100vh;
	background-color:#06C1FB
}
.menu-list-lvl2 {
	padding:0px;
	padding-top:5px;
	margin:0px; 
}
.list-item-lvl2 {
	display:table;
	border-collapse:collapse;
}
.list-item-lvl2:hover{
	background-color:#09F;
}
.list-item-lvl2>a {
	display:table-cell;
	text-decoration:none;
	width:230px;
	height:40px;
	border-collapse:collapse;
	vertical-align:middle;
	padding-left:10px;
}
.menu-icon-lvl2 {
	display:table-cell;
	width:32px;
	height:32px;
	background-color:#696;
	border-radius:4px;
}
.item-name-lvl2 {
	display:table-cell;
	vertical-align:middle;
	padding-left:15px;
	font-size:20px;
}

/*Footer*/
footer{
	background-color:black;
	color:white;
	position:fixed;
	bottom:0px;
	width:100%;
	text-align:center;
	font-size:14px;
	line-height:7px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test Site</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="js_libs/jquery-2.1.1.js"></script>
<script src="main.js"></script> 

</head>

<body>
<!-- Header information -->
 <header>
  <h1> Some random title for the page</h1>
 </header>


 <!-- Footer information -->
<footer>
  <p id="foot-info">
   <span>Put some random information here at the bottom</span>
  </p>
 </footer>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题