Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как отделить улик родителя от дочернего (https://javascript.ru/forum/jquery/37992-kak-otdelit-ulik-roditelya-ot-dochernego.html)

titans 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 16.05.2013 16:36

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

ksa 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 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 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>

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

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


Часовой пояс GMT +3, время: 06:59.