Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.01.2013, 18:29
Новичок на форуме
Отправить личное сообщение для stdm Посмотреть профиль Найти все сообщения от stdm
 
Регистрация: 25.01.2013
Сообщений: 4

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

<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 ?
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2013, 19:10
Аватар для LEGIONus
Новичок на форуме
Отправить личное сообщение для LEGIONus Посмотреть профиль Найти все сообщения от LEGIONus
 
Регистрация: 23.01.2013
Сообщений: 8

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

Последний раз редактировалось LEGIONus, 25.01.2013 в 20:12. Причина: Добавление ссылки на пример
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2013, 21:04
Новичок на форуме
Отправить личное сообщение для stdm Посмотреть профиль Найти все сообщения от stdm
 
Регистрация: 25.01.2013
Сообщений: 4

Спасибо, но возникла следующая проблема, click срабатывает один раз только на <li>Подарки, а на <li>Сувенирные изделия - два раза и на <li>Музыкальные - 3 раза, понимаю, что это связано с условием $('li'). Как сделать, чтоб клик срабатывал всегда один раз?
Ответить с цитированием
  #4 (permalink)  
Старый 25.01.2013, 22:19
Аватар для LEGIONus
Новичок на форуме
Отправить личное сообщение для LEGIONus Посмотреть профиль Найти все сообщения от LEGIONus
 
Регистрация: 23.01.2013
Сообщений: 8

Дело в структуре вашего html-документа. Щелкнув допустим на li с "Сувенирные изделия" мы также щелкаем на li c "Подарки" внутри которого он располагается. Можно:
1. Поменять структуру документа.
2. Присваивать li каждого уровня классы по которым их можно различать их уровень уже работать с ними.
3. Делать кучу условий, проверяющих по li какого уровня щелкнул пользователь и в зависимости от этого раскрывать одни li и не позволять сворачиваться li верхнего уровня.
Кстати такой вопрос, а какие именно ul должны быть свернутыми?? Если только последний уровень то сделать можно так: http://learn.javascript.ru/play/tCTwZ
Ответить с цитированием
  #5 (permalink)  
Старый 25.01.2013, 23:05
Новичок на форуме
Отправить личное сообщение для stdm Посмотреть профиль Найти все сообщения от stdm
 
Регистрация: 25.01.2013
Сообщений: 4

Получился один, отличающийся от предложенных вариант, когда click срабатывает один раз:
http://learn.javascript.ru/play/t5Lo1b
Функция переданная в параметр к другой функции, так влияет на обработку click?
Ответить с цитированием
  #6 (permalink)  
Старый 26.01.2013, 04:39
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

stdm,
Проблема с автоскрытием элементов навигации
Ответить с цитированием
  #7 (permalink)  
Старый 30.01.2013, 04:45
Аватар для LEGIONus
Новичок на форуме
Отправить личное сообщение для LEGIONus Посмотреть профиль Найти все сообщения от LEGIONus
 
Регистрация: 23.01.2013
Сообщений: 8

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

Последний раз редактировалось LEGIONus, 30.01.2013 в 07:49. Причина: Грамматическая ашипка
Ответить с цитированием
  #8 (permalink)  
Старый 30.01.2013, 07:53
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,882

Сообщение от 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>
Ответить с цитированием
  #9 (permalink)  
Старый 30.01.2013, 08:28
Аватар для LEGIONus
Новичок на форуме
Отправить личное сообщение для LEGIONus Посмотреть профиль Найти все сообщения от LEGIONus
 
Регистрация: 23.01.2013
Сообщений: 8

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

не прокатит.
Ответить с цитированием
  #10 (permalink)  
Старый 30.01.2013, 09:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,152

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>

Последний раз редактировалось рони, 30.01.2013 в 10:35. Причина: добавил css
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ext.form.ComboBox, как принудительно обнулить выпадающий список? martinelli ExtJS 4 10.07.2012 11:23
Autocomplete + выпадающий список yarnik jQuery 0 08.03.2012 13:20
Выпадающий список не помещается в div'е LA_ Элементы интерфейса 5 01.11.2010 09:43
Выпадающий список с возможностью ввода текста LA_ Элементы интерфейса 6 27.10.2010 15:30
Помогите вставить в форму не только чекбоксы но и выпадающий список seva_81 Серверные языки и технологии 3 20.09.2010 09:02