Форум

titans · #1 (**permalink**) 16.05.2013, 15:15

Всем привет. У меня есть HTML

<div class="MainM">Main1
	<div class="Sub">Sub1</div>
	<div class="Sub">Sub2
		<div class="Sub_Sub">Sub_Sub1</div>
		<div class="Sub_Sub">Sub_Sub2</div>
	</div>
</div>

И сам скрипт:

jQuery(document).ready(function() {
		  jQuery(".Sub").hide();
		  jQuery(".Sub_Sub").hide();
		  
		  jQuery(".MainM").click(function()
		  {
			jQuery(this).children(".Sub").slideToggle(500);
		  });
		  jQuery(".Sub").click(function()
		  {
			jQuery(this).children(".Sub_Sub1").slideToggle(500);
		  });
		});

Все работает, кроме того, что если кликнуть по Sub, что бы его открыть, то срабатывает родитель, и свой div закрывает. В общем как сделать, что бы при клике по Sub открывался Sub_Sub1?

danik.js · #2 (**permalink**) 16.05.2013, 16:36

e.stopPropagation() остановит всплытие клика. Так что до .MainM клик не дойдет. Объект е приходит аргументом в функцию-обработчик.

ksa · #3 (**permalink**) 16.05.2013, 16:36

Как вариант...

<!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">
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery(".Sub").hide();
	jQuery(".Sub_Sub").hide();
	jQuery(".MainM > span").click(function(){
		jQuery(this.parentNode).children(".Sub").slideToggle(500);
	});
	jQuery(".Sub").click(function(){
		jQuery(this).children(".Sub_Sub").slideToggle(500);
	});
});
</script>
</head>
<body>
<div class="MainM"><span>Main1</span>
	<div class="Sub">Sub1</div>
	<div class="Sub">Sub2
		<div class="Sub_Sub">Sub_Sub1</div>
		<div class="Sub_Sub">Sub_Sub2</div>
	</div>
</div>
</body>
</html>

Но твой ХТМЛ - фигня какая-то...

titans · #4 (**permalink**) 16.05.2013, 16:44

ну хорошо. Давайте по другому.

<div class="MainM">Main1</div>
	<div class="Sub">Sub1</div>
	<div class="Sub">Sub2</div>
		<div class="Sub_Sub">Sub_Sub1</div>
		<div class="Sub_Sub">Sub_Sub2</div>

jQuery(document).ready(function() {
		  jQuery(".Sub").hide();
		  jQuery(".Sub_Sub").hide();
		  
		  jQuery(".MainM").click(function()
		  {
			jQuery(this).next().slideToggle(500);
		  });
		  jQuery(".Sub").click(function()
		  {
			jQuery(this).next().slideToggle(500);
		  });
		});

Пример брал отсюда:
http://designgala.com/how-to-expand-...-using-jquery/
Тут прикол в том, что их код не совсем подходит, т.к. он открывает почему-то только первый div, а потом заканчивает работу

ksa · #5 (**permalink**) 17.05.2013, 09:06

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

ну хорошо. Давайте по другому.

<div class="MainM">Main1</div>
	<div class="Sub">Sub1</div>
	<div class="Sub">Sub2</div>
		<div class="Sub_Sub">Sub_Sub1</div>
		<div class="Sub_Sub">Sub_Sub2</div>

Это вообще шлак!

Я х/з что тебе нужно в итоге... Но как вариант посмотри вот это

Форум

Справочник

Discord чат

Курсы javascript