Конструкция html
<ul class="menu">
<li><a href="#">My Account</a>
<ul class="sub-menu">
<li><a href="#">Главная 2</a></li>
<li><a href="#dashboard" >Dashboard</a></li>
</ul>
</li>
<li><a href="#dashboard" >Dashboard</a>
<ul class="sub-menu">
<li><a href="#">Главная 2</a></li>
<li><a href="#dashboard" >Dashboard</a></li>
</ul>
</li>
<li><a href="#signout">Sign Out</a></li>
</ul>
Скрипт
$(document).ready(function() {
$('ul li').has('ul').addClass('include');
$(".include").click(function() {
var X = $(this).attr('id');
if(X == 1) {
$(".sub-menu").hide();
$(this).attr('id', '0');
}
else {
$(".sub-menu").show();
$(this).attr('id', '1');
}
});
//Mouseup textarea false
$(".sub-menu").mouseup(function() {
return false
});
$(".include").mouseup(function() {
return false
});
//Textarea without editing.
$(document).mouseup(function() {
$(".sub-menu").hide();
$(".include").attr('id', '');
});
});
Как сейчас работает:
Присваивает элементу li у которого есть под уровень ul, класс стилей.
Определяет элемент по добавленному классу и вычисляет значение id элемента.
При нажатии мышкой на элемент, ему присваивается id = 1, это значит, что он показывается.
При повторном нажатии на элемент (id = 0), меню исчезает.
Так же элемент исчезает при щелчке в любом месте страницы.
При нажатии на какой либо раскрывающийся элемент, раскрываются все.
Задача:
Подсчитывать общее количество элементов li у которых есть под уровень ul и присваивать им порядковый номер в виде id.
Сделать так, чтобы при нажатии на определённый раскрывающейся список выпадал именно он, а не все сразу и причем иногда в одном и том же месте.
Добавить функцию, при которой нажатый элемент с классом присвоенным элементу li который имеет под уровень ul, приобретал дополнительный класс нажатого элемента.
