Online jQuery Editor

Browse more Jquery Examples
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   		var menu = [
				{"fieldname":"New Action","fieldval":"new_action","fieldtype":"menu"},
				{"fieldname":"New Customer","fieldval":"new_customer","fieldtype":"submenu"},
				{"fieldname":"New Quotation","fieldval":"new_quote","fieldtype":"submenu"},
				{"fieldname":"New Order","fieldval":"new_so","fieldtype":"submenu"},
				{"fieldname":"New PO","fieldval":"new_po","fieldtype":"submenu"},
				{"fieldname":"New DO","fieldval":"new_do","fieldtype":"submenu"},
				{"fieldname":"New PO Receive","fieldval":"new_receive","fieldtype":"submenu"},
				{"fieldname":"New Invoice","fieldval":"new_invoice","fieldtype":"submenu"},
				{"fieldname":"Find Action","fieldval":"find_action","fieldtype":"menu"},
				{"fieldname":"Find Customer","fieldval":"find_customer","fieldtype":"submenu"},
				{"fieldname":"Find Quotation","fieldval":"find_quote","fieldtype":"submenu"},
				{"fieldname":"Find Order","fieldval":"find_so","fieldtype":"submenu"},
				{"fieldname":"Find PO","fieldval":"find_po","fieldtype":"submenu"},
				{"fieldname":"Find DO","fieldval":"find_do","fieldtype":"submenu"},
				{"fieldname":"Find PO Receive","fieldval":"find_receive","fieldtype":"submenu"},
				{"fieldname":"Find Invoice","fieldval":"find_invoice","fieldtype":"submenu"}
			];
			var A=1;
		$(menu).each(function(key,value){
		    console.log(A++);
		   var menu_div = $("<div>").addClass(value.fieldval).text(value.fieldname).attr("type",value.fieldtype);
		   if(value.fieldtype=='menu'){
		       menu_div.addClass("kt_menu_label");
		   }else{
		       menu_div.addClass("kt_submenu_label").addClass("kt_menu_hide");
		   }
		   $(".wrapper").append(menu_div);
		});	
		
		$(".wrapper").on("click",".kt_menu_label",function(){
		    var this_menu = $(this).attr("class").split(" ");
		    alert(this_menu[0]);
		    $("div."+this_menu[0]+"[type='submenu']").removeClass("kt_menu_hide").addClass("kt_menu_show");
		    //$("div.a[customattrib='2']")
		})
});

</script>
<style>
.kt_menu_label{    width:300px;padding:10px 20px;float:left;cursor:pointer;}
.kt_submenu_label{    width:300px;padding:5px 10px;float:left;cursor:pointer;}
.kt_menu_hide{    display:none;opacity: 0;visibility: hidden;transition-property: opacity, visibility;transition-duration: 1s, 0s;transition-delay: 0s, 1s;}
.kt_menu_show{    display:block;opacity: 1;visibility: hidden;transition-property: visibility, opacity;transition-duration: 0s, 1s;transition-delay: 1s, 0s;}
</style>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>
Online jQuery Editor

Follow

Newsletter
