Javascript-форум - drop-down в меню

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - drop-down в меню (https://javascript.ru/forum/dom-window/45842-drop-down-v-menyu.html)

drop-down в меню

Все работает хорошо, кроме одного. Не знаю что написать и куда. Для идеала в этот код внести бы поправку, дополняющую функционал следующим: при нажатии в область раскрывшегося блока ничего не должно происходить, сейчас при нажатии в это область блок скрывается.
Песочница: http://learn.javascript.ru/play/vD5s2b

$(document).ready(function () {
	function hideallDropdowns() {
		$(".dropped .hiddenBlock").hide();
		$(".dropped").removeClass('dropped');
		$(".dropped .hiddenBlock .title").unbind("click");
	}
	function showDropdown(e) {
		var elm = $(e).parent().addClass('dropped');
		elm
			.find('.title')
			.click(function () {
				hideallDropdowns();
			})
			.html($(e).html());
		elm.find('.hiddenBlock').show();
	}
	$(".nameBlock").click(function(){
		showDropdown(this);
	});
	$(document).mouseup(function () {
		hideallDropdowns();
	});
});

Mizter Egoist,
проверяйте что клик мыши вне меню -- строка 21 тут
и строка 94 в примере

http://learn.javascript.ru/play/5TtJab

Сам сделал так:

$(document).ready(function () {
	function hideallDropdowns() {
		$(".dropped .hiddenBlock").hide();
		$(".dropped").removeClass('dropped');
		$(".dropped .hiddenBlock .title").unbind("click");
	}
	function showDropdown(e) {
		var elm = $(e).parent().addClass('dropped');
		elm
			.find('.title')
			.click(function () {
				hideallDropdowns();
			})
			.html($(e).html());
		elm.find('.hiddenBlock').show();
	}
	$(".nameBlock").click(function(){
		showDropdown(this);
	});
	$(document).mouseup(function () {
		hideallDropdowns();
	});
	$(".hiddenBlock").mouseup(function() {
		return false
	});
});

Подсказали сделать так:

$(document).ready(function () {
	function hideallDropdowns() {
		$(".dropped .hiddenBlock").hide();
		$(".dropped").removeClass('dropped');
		$(".dropped .hiddenBlock .title").unbind("click");
	}
	function showDropdown(e) {
		var elm = $(e).parent().addClass('dropped');
		elm
			.find('.title')
			.click(function () {
				hideallDropdowns();
			})
			.html($(e).html());
		elm.find('.hiddenBlock').show();
	}
	$(".nameBlock").click(function(){
		showDropdown(this);
	});
	$(document).mouseup(function (event) {
		if ($(event.target).parents(".headers").size()) return;  
		hideallDropdowns();
	});
});

Как правильней?

Переменная elm ищет родителя и добавляет ему класс dropped, html у меня такой:

<div class="headers">
	<div class="nameBlock">Человеческая Личность</div>
	<div class="hiddenBlock">
		<span class="title"></span>
		<div class="thing">
			<p><a href="#">Пункт меню</a></p>
			<p><a href="#">Пункт меню</a></p>
			<p><a href="#">Пункт меню</a></p>
		</div>
	</div>
</div>

И получается, что родитель headers получает класс dropped.
Возможно ли поменять функцию таким образом, чтобы работало точно так же, но изменения происходили у nameBlock. Например ему добавлялся бы класс dropped или .attr('data-active', '1') и .attr('data-active', '0'). Пытался сделать сам, получилось добавлять .attr('data-active', '1') и .attr('data-active', '0') но при нажатии на один пункт меню, открывались все.

Mizter Egoist,
неосилил :(

Помогите пожалуйста его оптимизировать, он так косо и дебильно работает, но работает.

$(document).ready(function () {
	showBasketLine();
	showBasketSmall();
	$(".storeBuy a").click(function(){
		showBasketLine();
	});
	$(".basketLineBox").click(function(){
		showDropdown(this);
	});
	$(document).mouseup(function () {
		hideallDropdowns();
	});
	$(".basketSmallBox").mouseup(function() {
		return false;
	});
	function hideallDropdowns() {
		$(".dropped .basketSmallBox").hide();
		$(".dropped").removeClass('dropped');
		$(".dropped .basketSmallBox .title").unbind("click");
	}
	function showDropdown(e) {
		var elm = $(e).parent().addClass('dropped');
		elm
			.find('.title')
			.click(function () {
				hideallDropdowns();
			})
			.html($(e).html());
		elm.find('.basketSmallBox').show();
		showBasketSmall();
	}
	function showBasketLine() {
		$.ajax({
			url: "/include_areas/ajax.handler.php",
			type: "POST",
			cache: true,
			data: "block=basketLine",
			dataType: "html",
			success: function(data){
				$('.basketLineBox').html(data)
			}
		});
	}
	function showBasketSmall() {
		$.ajax({
			url: "/include_areas/ajax.handler.php",
			type: "POST",
			cache: true,
			data: "block=basketSmall",
			dataType: "html",
			success: function(data){
				$('.basketSmallBox').html(data)
			}
		});
	}
});

Вот html при работе кода, это когда ссылка не нажата

<div id="headerTel" class="">
	<div class="basketLineBox"><a href="#basket">В корзине <b>3</b> товара</a></div>
	<div class="basketSmallBox" style="display: none;">
		<span class="title"></span>
		<h3>Позиции в Вашей корзине:</h3>
		<div class="basketThing">
			<p class="smallName"><a href="#" title="Поддон" class="underline">Поддон</a></p>
			<p class="smallPrice">Цена:&nbsp;138.06 руб.</p>
			<p class="smallQuantity">Количество:&nbsp;2.00</p>
		</div>
		<div class="basketThing">
			<p class="smallName"><a href="#" title="Поддон" class="underline">Поддон</a></p>
			<p class="smallPrice">Цена:&nbsp;159.30 руб.</p>
			<p class="smallQuantity">Количество:&nbsp;20.00</p>
		</div>
		<div class="basketThing">
			<p class="smallName"><a href="#" title="Поддон" class="underline">Поддон</a></p>
			<p class="smallPrice">Цена:&nbsp;236.00 руб.</p>
			<p class="smallQuantity">Количество:&nbsp;1.00</p>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/cart"><input type="submit" value="Изменить количество"></form>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/order"><input type="submit" value="Оформить заказ"></form>
		</div>
	</div>
</div>

А это когда ссылка нажата:

<div id="headerTel" class="dropped">
	<div class="basketLineBox"><a href="#basket">В корзине <b>3</b> товара</a></div>
	<div class="basketSmallBox" style="display: block;">
		<span class="title"></span>
		<h3>Позиции в Вашей корзине:</h3>
		<div class="basketThing">
			<p class="smallName"><a href="#" title="Поддон" class="underline">Поддон</a></p>
			<p class="smallPrice">Цена:&nbsp;138.06 руб.</p>
			<p class="smallQuantity">Количество:&nbsp;2.00</p>
		</div>
		<div class="basketThing">
			<p class="smallName"><a href="#" title="Поддон" class="underline">Поддон</a></p>
			<p class="smallPrice">Цена:&nbsp;159.30 руб.</p>
			<p class="smallQuantity">Количество:&nbsp;20.00</p>
		</div>
		<div class="basketThing">
			<p class="smallName"><a href="#" title="Поддон" class="underline">Поддон</a></p>
			<p class="smallPrice">Цена:&nbsp;236.00 руб.</p>
			<p class="smallQuantity">Количество:&nbsp;1.00</p>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/cart"><input type="submit" value="Изменить количество"></form>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/order"><input type="submit" value="Оформить заказ"></form>
		</div>
	</div>
</div>

Нужно чтобы выходило вот так:

<div id="headerTel" class="dropped">
	<div class="basketLineBox"><a href="#basket">В корзине <b>3</b> товара</a></div>
	<div class="basketSmallBox" style="display: block;">
		<span class="title"><a href="#basket">В корзине <b>3</b> товара</a></span>
		<h3>Позиции в Вашей корзине:</h3>
		<div class="basketThing">
			<p class="smallName"><a href="#" title="Поддон" class="underline">Поддон</a></p>
			<p class="smallPrice">Цена:&nbsp;138.06 руб.</p>
			<p class="smallQuantity">Количество:&nbsp;2.00</p>
		</div>
		<div class="basketThing">
			<p class="smallName"><a href="#" title="Поддон" class="underline">Поддон</a></p>
			<p class="smallPrice">Цена:&nbsp;159.30 руб.</p>
			<p class="smallQuantity">Количество:&nbsp;20.00</p>
		</div>
		<div class="basketThing">
			<p class="smallName"><a href="#" title="Поддон" class="underline">Поддон</a></p>
			<p class="smallPrice">Цена:&nbsp;236.00 руб.</p>
			<p class="smallQuantity">Количество:&nbsp;1.00</p>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/cart"><input type="submit" value="Изменить количество"></form>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/order"><input type="submit" value="Оформить заказ"></form>
		</div>
	</div>
</div>

Знаю что проблема в коде, скорее всего в ajax, но мозгов маловато в этой теме, не могу справиться сам.
Помогите пожалуйста :help:

Чтобы было все Ok и интерактивно, вот ссылка на песочницу, где видно всю соль моей проблемы.
Вот косячный вариант http://learn.javascript.ru/play/SLlvtc
Вот рабочий вариант, но он не обновляет ajax http://learn.javascript.ru/play/kEiUEb

Mizter Egoist,
чтобы сработал ajax надо запретить submit форм -- и изучите on -- пригодится и для форм и для ссылок.

$(".storeBuy a").click(function () {
          showBasketLine();
        });

это несработает не потому что нет такого класса а потому что нет ссылок на момент этой строки скрипта
также непомешает знания про отмену всплытия события и отмену действия по умолчанию

рони,
.storeBuy эта ссылка находиться в каталоге, когда человек нажимает на ссылку Купить, срабатывает добавление в корзину и ajax мне обновляет строчку <a href="#basket">В корзине <b>3</b> товара</a>
Все остальное Я согласен, нужно изучить, но это дело времени, а нужно все сделать поскорей, сам не справлюсь.

Если сделать вместо:

$(".basketLineBox").click(function () {
     showDropdown(this);
});

на

$(".basketLineBox a").click(function () {
     showDropdown(this);
});

То перестает работать, как это изменить? Я не знаю как исправить.