Выпадающий список
Добрый день.
есть древовидный список сформированный скриптом <ul> <li>Подарки <ul> <li>Сувенирные изделия <ul id='h'> <li>Музыкальные</li> <li>Шкатулки</li> <li>Из дерева</li> <li>Металлические</li> </ul> </li> <li>Цветы <ul> <li>Букеты</li> <li>Подарочные цветы</li> </ul> </li> </ul> </li> </ul> необходимо сделать его выпадающим, чтобы при клике на <li>, методом .toggle открвался\хайдился следующий элемент, если он <ul>
$(document).ready(function() {
$('div').click(function() {
$("#h").toggle();
});
});
С жестко привязанным id все работает хорошо, но как определить следующий <ul> без привязки id ? |
Здравствуйте.
$('div').click(function() {
Не увидел в вашем html ни одного div'а, возможно имелось ввиду:
$('li').click(function() {
?? По поводу вашего вопроса, попробуйте:
$(document).ready(function() {
$('li').click(function() {
$(this).find('ul:first').toggle();
});
});
http://learn.javascript.ru/play/gykVub |
Спасибо, но возникла следующая проблема, click срабатывает один раз только на <li>Подарки, а на <li>Сувенирные изделия - два раза и на <li>Музыкальные - 3 раза, понимаю, что это связано с условием $('li'). Как сделать, чтоб клик срабатывал всегда один раз?
|
Дело в структуре вашего html-документа. Щелкнув допустим на li с "Сувенирные изделия" мы также щелкаем на li c "Подарки" внутри которого он располагается. Можно:
1. Поменять структуру документа. 2. Присваивать li каждого уровня классы по которым их можно различать их уровень уже работать с ними. 3. Делать кучу условий, проверяющих по li какого уровня щелкнул пользователь и в зависимости от этого раскрывать одни li и не позволять сворачиваться li верхнего уровня. Кстати такой вопрос, а какие именно ul должны быть свернутыми?? Если только последний уровень то сделать можно так: http://learn.javascript.ru/play/tCTwZ |
Получился один, отличающийся от предложенных вариант, когда click срабатывает один раз:
http://learn.javascript.ru/play/t5Lo1b Функция переданная в параметр к другой функции, так влияет на обработку click? |
|
Цитата:
return false;который вы вставили в обработчик клика. Для примера Если упрощенно, то что делается: при клике на li "второго уровня" который содержит li "третьего уровня" и входит в состав li "первого уровня", мы разворачиваем li "третьего уровня" и сворачиваем li "первого уровня", но с return false мы прерываем анимацию "посередине" и разворачиваем li "третьего уровня" не сворачивая li "первого уровня". Как то так. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
ul {
list-style: none;
}
ul ul {
display: none;
}
span {
cursor: pointer;
}
li > span:before {
content: '+ ';
}
li.on > span:before {
content: '- ';
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('span').click(function () {
$(this.parentNode).toggleClass('on');
$(this).next().toggle();
});
});
</script>
</head>
<body>
<ul>
<li><span>Подарки</span>
<ul>
<li><span>Сувенирные изделия</span>
<ul id='h'>
<li>Музыкальные</li>
<li>Шкатулки</li>
<li>Из дерева</li>
<li>Металлические</li>
</ul>
</li>
<li><span>Цветы</span>
<ul>
<li>Букеты</li>
<li>Подарочные цветы</li>
</ul>
</li>
</ul>
</li>
<li><span>Гостинцы</span>
<ul>
<li><span>Леденцы</span>
</li>
<li><span>Пряники</span>
</li>
</li>
</ul>
</body>
</html>
|
Как я понял из первого поста ТС, список формируется скриптом и структуру его менять низзя, так что
$('span').click
не прокатит. |
stdm,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
li ul {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li').click(function (event) {
$(this).children("ul").slideToggle() ;
event.stopPropagation();
});
});
</script>
</head>
<body>
<ul>
<li>Подарки
<ul>
<li>Сувенирные изделия
<ul id='h'>
<li>Музыкальные</li>
<li>Шкатулки</li>
<li>Из дерева</li>
<li>Металлические</li>
</ul>
</li>
<li>Цветы
<ul>
<li>Букеты</li>
<li>Подарочные цветы</li>
</ul>
</li>
</ul>
</li>
</ul>
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:26. |