Выпадающее меню (костыли)
 

Добрый день товарищи!
Сразу оговорюсь в JS я ноль, но по злой иронии я вынужден помимо верстки страниц на веб-сайте и скрипты добавлять..

Была задача создать выпадающее меню, не по наведению а по клику, и при нажатии в любой другой области веб-сайта или на другой пункт меню выпадающий блок должен был закрываться.

Нашел следующий скрипт:

var cbpHorizontalMenu = (function() {

	var $listItems = $( '#cbp-hrmenu > ul > li' ),
		$menuItems = $listItems.children( 'a' ),
		$body = $( 'body' ),
		current = -1;

	function init() {
		$menuItems.on( 'click', open );
		$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
	}

	function open( event ) {

		if( current !== -1 ) {
			$listItems.eq( current ).removeClass( 'cbp-hropen' );
		}

		var $item = $( event.currentTarget ).parent( 'li' ),
			idx = $item.index();

		if( current === idx ) {
			$item.removeClass( 'cbp-hropen' );
			current = -1;
		}
		else {
			$item.addClass( 'cbp-hropen' );
			current = idx;
			$body.off( 'click' ).on( 'click', close );
		}

		return false;

	}

	function close( event ) {
		$listItems.eq( current ).removeClass( 'cbp-hropen' );
		current = -1;
	}

	return { init : init };

})();

И при одной горизонтальной полоске меню из 5 пунктов работает безотказно! Но начинаются костыли и надо сделать еще 4 горизонтальные плашки меню. Вот фото:

http://javascript.ru/forum/attachmen...d=145466854 2

Я сделал так: разместил 5 меню с тегом <nav> и разными ID, cbp-hrmenu1, cbp-hrmenu2 и т.д.
В файле со скриптом я не придумал ничего лучше как скопировать скрипт и сделать их 5 штук соответственно везде поменял ID от 1 до 5, ну и вроде все открываются, но при открытии одного из пунктов 1го меню, при попытке открыть пункт 3-го меню, пункт 1-го меню не закрывается, фото:

http://javascript.ru/forum/attachmen...d=145466873 6

То есть скрипт но функционал
открыл меню -> щелкнул в любое место -> меню закрылось
работет!

Помогите допилить, и вообще как то реализовать не в 5 скриптах, а в 1-м.

Да кстати на странице самой еще размещен следующий код, видимо для включения/инициализации скрипта.

<script src="/web2/js/cbpHorizontalMenu.js"></script> 
<script>
$(function() {
 cbpHorizontalMenu1.init(); 
 cbpHorizontalMenu2.init(); 
 cbpHorizontalMenu3.init(); 
 cbpHorizontalMenu4.init(); 
 cbpHorizontalMenu5.init(); 
});
</script> 

:help:

вот ссылка на сайт с меню!
для понимания происходящего

Sk1LL,
типа тут код будет когда-то ... пятница ... или открывака номер 25... :lol:

рони,
Да кстати поздравляю с пятницей! С меня пиво чес-слово! если поможете!

Sk1LL,
убрать все скрипты, id и прочее из первого сообщения и заменить на

$(function() {
    var a = $("nav > ul > li");
    $(" > a", a).click(function(b) {
        b.preventDefault();
        a.not($(this).parent().toggleClass("cbp-hropen")).removeClass("cbp-hropen")
    });
    $("body").click(function(b) {
        $(b.target).closest(a).length || a.removeClass("cbp-hropen")
    })
});