Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выпадающий список (https://javascript.ru/forum/jquery/34955-vypadayushhijj-spisok.html)

stdm 25.01.2013 18:29

Выпадающий список
 
Добрый день.
есть древовидный список сформированный скриптом

<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 ?

LEGIONus 25.01.2013 19:10

Здравствуйте.
$('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

stdm 25.01.2013 21:04

Спасибо, но возникла следующая проблема, click срабатывает один раз только на <li>Подарки, а на <li>Сувенирные изделия - два раза и на <li>Музыкальные - 3 раза, понимаю, что это связано с условием $('li'). Как сделать, чтоб клик срабатывал всегда один раз?

LEGIONus 25.01.2013 22:19

Дело в структуре вашего html-документа. Щелкнув допустим на li с "Сувенирные изделия" мы также щелкаем на li c "Подарки" внутри которого он располагается. Можно:
1. Поменять структуру документа.
2. Присваивать li каждого уровня классы по которым их можно различать их уровень уже работать с ними.
3. Делать кучу условий, проверяющих по li какого уровня щелкнул пользователь и в зависимости от этого раскрывать одни li и не позволять сворачиваться li верхнего уровня.
Кстати такой вопрос, а какие именно ul должны быть свернутыми?? Если только последний уровень то сделать можно так: http://learn.javascript.ru/play/tCTwZ

stdm 25.01.2013 23:05

Получился один, отличающийся от предложенных вариант, когда click срабатывает один раз:
http://learn.javascript.ru/play/t5Lo1b
Функция переданная в параметр к другой функции, так влияет на обработку click?

Deff 26.01.2013 04:39

stdm,
http://javascript.ru/forum/dom-windo...tml#post182559

LEGIONus 30.01.2013 04:45

Цитата:

Сообщение от stdm (Сообщение 229495)
Функция переданная в параметр к другой функции, так влияет на обработку click?

Я бы прелположил, что так влияет не функция, а
return false;
который вы вставили в обработчик клика. Для примера
Если упрощенно, то что делается: при клике на li "второго уровня" который содержит li "третьего уровня" и входит в состав li "первого уровня", мы разворачиваем li "третьего уровня" и сворачиваем li "первого уровня", но с return false мы прерываем анимацию "посередине" и разворачиваем li "третьего уровня" не сворачивая li "первого уровня". Как то так.

ksa 30.01.2013 07:53

Цитата:

Сообщение от stdm
есть древовидный список
...
необходимо сделать его выпадающим

Предложу такой вариант...

<!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>

LEGIONus 30.01.2013 08:28

Как я понял из первого поста ТС, список формируется скриптом и структуру его менять низзя, так что
$('span').click

не прокатит.

рони 30.01.2013 09:48

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, время: 05:49.