I am stuck while creating List (Ul li),infact this is a menu pupolating at runtime.
Like
.Computers items
.Keyboard
.Cd rom
.office Equipment
.item 1
.item 2
.item 3
.item 4
.item 5
problem is, when i tryied to add new
I am using this code
$("#cssmenu ul").append('<li class="active has-sub" id="'+ id.toString()+'" onclick="My_Func($(this).html(),this.id)"><a href="#"><span>'+txt +'</span></a>');
You should first wrap the contents of your first-level li (i.e. the ones you want to be click-able and load data) in a. This will save you from the frustration of multi-level li targeting. Also give a unique id to your li so as to load corresponding data.
Then, bind to the click event on those a and create a ul. Load data into li and append them to this ul. Once done, append this ul into the currently clicked li.
This snippet will make it clear to you:
For the purpose of this demo, we loading data from an object dictionary which contains the contents of each category as an array.
/* For the purpose of this demo, data is stored in this object */
var items = {
"computers": ['Computer 1', 'Computer 2', 'Computer 3'],
"equipment": ['Eq 1', 'Eq 2'],
"peripherals": ['CD', 'Printer', 'etc']
};
/* Target the a which are direct children of li which are direct children of list ul */
$("ul#list > li > a").on("click", function(e) {
// When a is clicked, we get the id of parent li
var id = $(this).parent().attr("id");
// Create a ul
var $wrap = $("<ul />");
// Loop thru data, or loaded thru other means
for (var idx in items[id]) {
// Create li from data and append to ul
$wrap.append("<li>" + items[id][idx] + "</li>");
}
// append this ul to the current li
$(this).parent().append($wrap);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li id="computers"><a href="#">Computers</a></li>
<li id="equipment"><a href="#">Equipment</a></li>
<li id="peripherals"><a href="#">Peripherals</a></li>
<li>Others</li>
</ul>
