Форум

de2lide · #1 (**permalink**) 15.10.2013, 15:27

Есть разворачиваемое дерево в каждой рубрике будет кнопка добавить
сlass="add" но при нажатии срабатывает ".add" ).click и предыдущее событие $('.top').click сворачивает / разворачивает дерево.

$(document).ready(function(){
		$('.top').click(function(){
			$(this).next('ul').toggle('normal');
			return false;
		});
		
		$( ".add" ).click(  function() {
			alert('add rasdel');
                       //аякс запрос...
		} );

<style>
	ul li {list-style: none;cursor: pointer;}
	ul li:hover {color:бblue}
	ul li ul {display:none;color:green;padding:3px 15px; border-left:1px solid #acacac;}
	ul li ul li ul{color:юred;}
	
</style>
<ul>
	<li ><span class="top">Автозапчасти<span class="add" >X</span></span>
		<ul>
			<li ><span class="top">Двигатель</span>
				<ul>
					<li><span class="razdel">Грм</span></li>
					<li><span class="razdel">Поршни</span></li>
					<li><span class="razdel">Прокладки</span></li>
					<li><span class="razdel">Глушители</span></li>
				</ul>
			</li>
			<li><span class="top">Оптика</span>
				<ul>
					<li>Уровень 3</li>
					<li>Уровень 3</li>
					<li>Уровень 3</li>
					<li>Уровень 3</li>
				</ul>
			</li>
			<li><span class="top">ТОрмоза</span>
				<ul>
					<li>ТОрмозные диски</li>
					<li>Цилиндры тормозные</li>
					
				</ul>
			</li>
		</ul>
	</li>
</ul>

как решить такую проблему.

de2lide · #2 (**permalink**) 15.10.2013, 15:33

Решил проблему вот так

$( "span .add" ).click(  function() {
			alert('add rasdel');
			[B]return false;[/B]
		} );

ksa · #3 (**permalink**) 15.10.2013, 16:47

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

но при нажатии срабатывает ".add" ).click и предыдущее событие $('.top').click

<span class="top">Автозапчасти<span class="add" >X</span></span>

Не суй одно в другое...

Помести их один за другим.

ksa · #4 (**permalink**) 15.10.2013, 16:51

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

<!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 li {list-style: none;cursor: pointer;}
	ul li:hover {color:бblue}
	ul li ul {display:none;color:green;padding:3px 15px; border-left:1px solid #acacac;}
	ul li ul li ul{color:юred;}
</style>
<script type="text/javascript">
$(function (){
	$('.top').click(function(){
		$(this).parent().next('ul').toggle('normal');
		return false;
	});
	$( ".add" ).click(  function() {
		alert('add rasdel');
	});
});
</script>
</head>
<body>
<ul>
	<li ><span><span class="top">Автозапчасти</span><span class="add" >X</span></span>
		<ul>
			<li ><span class="top">Двигатель</span>
				<ul>
					<li><span class="razdel">Грм</span></li>
					<li><span class="razdel">Поршни</span></li>
					<li><span class="razdel">Прокладки</span></li>
					<li><span class="razdel">Глушители</span></li>
				</ul>
			</li>
			<li><span class="top">Оптика</span>
				<ul>
					<li>Уровень 3</li>
					<li>Уровень 3</li>
					<li>Уровень 3</li>
					<li>Уровень 3</li>
				</ul>
			</li>
			<li><span class="top">ТОрмоза</span>
				<ul>
					<li>ТОрмозные диски</li>
					<li>Цилиндры тормозные</li>
					
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript