[de2lide]

Есть разворачиваемое дерево в каждой рубрике будет кнопка добавить
с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>

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