Форум

stdm · #1 (**permalink**) 25.01.2013, 20: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 · #2 (**permalink**) 25.01.2013, 21: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 · #3 (**permalink**) 25.01.2013, 23:04

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

LEGIONus · #4 (**permalink**) 26.01.2013, 00:19

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

stdm · #5 (**permalink**) 26.01.2013, 01:05

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

Deff · #6 (**permalink**) 26.01.2013, 06:39

stdm,
Проблема с автоскрытием элементов навигации

LEGIONus · #7 (**permalink**) 30.01.2013, 06:45

Сообщение от stdm

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

Я бы прелположил, что так влияет не функция, а

return false;

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

ksa · #8 (**permalink**) 30.01.2013, 09: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 · #9 (**permalink**) 30.01.2013, 10:28

Как я понял из первого поста ТС, список формируется скриптом и структуру его менять низзя, так что

$('span').click

не прокатит.

рони · #10 (**permalink**) 30.01.2013, 11: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>

Форум

Справочник

Discord чат

Курсы javascript