Есть код, который выводит и подгружает выпадающее меню.
$(document).ready(function(){
$.each($('#topmenu li'), function() {
var id = $(this).attr('id');
var ul_id = '"#'+id+'"';
var li = $(this);
var myCookie = $.cookie(id);
alert(myCookie);
if(myCookie == "show") {
$.ajax({
url: 'ajax/menu.html',
beforeSend: function(){
li.addClass('loading');
},
success: function(data){
li.append(data);
li.find(ul_id).stop(true, true);
li.find(ul_id).show();
$.cookie(id, 'show');
li.removeClass('loading');
}
});
}
});
$('#topmenu li').live('click', function(e){
var id = $(this).attr('id');
var ul_id = '"#'+id+'"';
var li = $(this);
if ($(this).children('ul').length == 0) {
$.ajax({
url: 'ajax/menu.html',
beforeSend: function(){
li.addClass('loading');
},
success: function(data){
li.append(data);
li.find(ul_id).stop(true, true);
li.find(ul_id).show();
$.cookie(id, 'show');
li.removeClass('loading');
var myCookie = $.cookie(id);
alert(myCookie);
}
});
}
else if (li.find(ul_id).is(':visible')) {
li.find(ul_id).toggle();
if($(this).parent().parent().attr("class") == "drop") {
second_id = $(this).attr('id');
$.cookie(second_id, 'hide_second');
var myCookie_second = $.cookie(second_id);
alert(myCookie_second);
} else {
$.cookie(id, 'hide');
var myCookie = $.cookie(id);
alert(myCookie);
}
}
else {
li.find(ul_id).toggle();
if($(this).parent().parent().attr("class") == "drop") {
second_id = $(this).attr('id');
$.cookie(second_id, 'show_second');
var myCookie_second = $.cookie(second_id);
alert(myCookie_second);
} else {
$.cookie(id, 'show');
var myCookie = $.cookie(id);
alert(myCookie);
}
}
$(this).addClass("active");
},
function() {
$(this).find('ul').slideUp('fast');
$(this).removeClass("active");
}
);
});
<ul id="topmenu">
<li class="drop" id="menu1"><a href="#" title="Меню 1">Меню 1</a></li>
<li class="drop" id="menu2"><a href="#" title="Меню 2">Меню 2</a></li>
<li class="drop" id="menu3"><a href="#" title="Меню 3">Меню 3</a></li>
</ul>
Файл с подменю:
<ul class="dop" id="menu1">
<li id="menu7" ><a href="#" title="Элемент 1">Элемент 1</a>
<ul id="menu7">
<li><a href="#" title="Элемент 1">Элемент 1</a></li>
<li><a href="#" title="Элемент 2">Элемент 2</a></li>
<li><a href="#" title="Элемент 3">Элемент 3</a></li>
</ul>
</li>
<li><a href="#" title="Элемент 2">Элемент 2</a></li>
<li><a href="#" title="Элемент 3">Элемент 3</a></li>
</ul>
<ul id="menu2">
<li><a href="#" title="Элемент 1">Элемент 4</a></li>
<li><a href="#" title="Элемент 2">Элемент 5</a></li>
<li><a href="#" title="Элемент 3">Элемент 6</a></li>
</ul>
<ul id="menu3">
<li><a href="#" title="Элемент 1">Элемент 7</a></li>
<li><a href="#" title="Элемент 2">Элемент 8</a></li>
<li><a href="#" title="Элемент 3">Элемент 9</a></li>
</ul>
Первый each разбирает первый список. А как быть с загруженными вложенными списками, у которых тоже есть свои подменю? Live each для него не действует?
