Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.01.2014, 01:58
Аспирант
Отправить личное сообщение для kapustnik Посмотреть профиль Найти все сообщения от kapustnik
 
Регистрация: 18.04.2013
Сообщений: 32

.toggle и вложенный <ul>
<script>
$(document).ready(function() {
		$(".main_left_menu li.chapter").on("click", "div", function(event) {
        $(this).parent().find('ul').toggle('slow');
});
});
</script>


<ul class="main_left_menu">
			<li class="chapter"><div><a href="#">All Products</a></div>
				<ul>
			     <li><div>Prymer 1</div></li>
			     <li><div>Prymer 2</div></li>
				 <li><div>Prymer 3</div></li>
				</ul>
			</li>
			<li class="chapter"><div><a href="#">Cofee</a></div>
			<ul>
			     <li><div>Prymer 1</div></li>
			     <li><div>Impresso</div>
					[B]<ul>
						<li>Negro</li>
						<li>Delicato</li>
						<li>Ristretto</li>
					</ul>[/B]
				 </li>
				 <li><div>Prymer 3</div></li>
				</ul>
			</li>


всё работает для одномерного списка

Но , открывая раздел , откр. и вложенные подразделы (в данном случае кусок выд. жирным .

если назначить display: none - то раздел все равно видно.

Если назначить display: none !important - раздел при раскрытие верхнего не видно , но уже и не работает раскрытие самого раздела

Помогите найти решение
Ответить с цитированием
  #2 (permalink)  
Старый 06.01.2014, 07:17
Интересующийся
Отправить личное сообщение для nikolya223 Посмотреть профиль Найти все сообщения от nikolya223
 
Регистрация: 09.11.2013
Сообщений: 15

читайте
если кратко то :first
Ответить с цитированием
  #3 (permalink)  
Старый 06.01.2014, 09:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от kapustnik
Помогите найти решение
Решение чего?
Ведь ты таки не написал, что вообще собираешся сделать со своей разметкой...

Постучав в свой новогодний шаманский бубен... Предположу, что у тебя проблемы с остановкой всплытия событий...
http://javascript.ru/tutorial/events...ovka-vsplytiya

Как вариант...
<!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">
li > ul {
	display: none;
}
</style>
<script type="text/javascript">
$(function() {
	$(".main_left_menu li").on("click", "div", function(event) {
		// кросс-браузерно
		event = event || window.event 
		if (event.stopPropagation) {
			// Вариант стандарта W3C:
			event.stopPropagation();
		} else {
			// Вариант Internet Explorer:
			event.cancelBubble = true;
		};
		$(this).next('ul').toggle('slow');
	});
});
</script>
</head>
<body>
<ul class="main_left_menu">
	<li class="chapter"><div><a href="#">All Products</a></div>
		<ul>
			<li><div>Prymer 1</div></li>
			<li><div>Prymer 2</div></li>
			<li><div>Prymer 3</div></li>
		</ul>
	</li>
	<li class="chapter"><div><a href="#">Cofee</a></div>
		<ul>
			<li><div>Prymer 1</div></li>
			<li><div>Impresso</div>
				<ul>
					<li>Negro</li>
					<li>Delicato</li>
					<li>Ristretto</li>
				</ul>
			</li>
			<li><div>Prymer 3</div></li>
		</ul>
	</li>
</ul>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перебор массива - вложенный цикл SWin Общие вопросы Javascript 35 27.12.2013 05:06
Сохранить вложенный список kuznetsov131 Элементы интерфейса 6 05.08.2013 05:43
Показать вложенный элемент меню notgosu Элементы интерфейса 1 31.10.2012 16:05
Не могу создать вложенный DIV для отступа-не учитывается padding/margin род. элемента xintrea (X)HTML/CSS 8 24.09.2012 15:58
не работает вложенный Content-Type: multipart/mixed в Ajax запросе. mister_maxim AJAX и COMET 0 08.10.2011 15:22