Форум

kapustnik · #1 (**permalink**) 06.01.2014, 01:58

<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 - раздел при раскрытие верхнего не видно , но уже и не работает раскрытие самого раздела

Помогите найти решение

nikolya223 · #2 (**permalink**) 06.01.2014, 07:17

читайте
если кратко то :first

ksa · #3 (**permalink**) 06.01.2014, 09:43

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript