Добрый день товарищи!
Сразу оговорюсь в 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:
