Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2016, 13:41
Интересующийся
Отправить личное сообщение для Sk1LL Посмотреть профиль Найти все сообщения от Sk1LL
 
Регистрация: 05.02.2016
Сообщений: 12

Выпадающее меню (костыли)
Добрый день товарищи!
Сразу оговорюсь в 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:
Изображения:
Тип файла: jpg 547567567.jpg (222.7 Кб, 6 просмотров)
Тип файла: jpg 54858588.jpg (200.8 Кб, 7 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2016, 13:43
Интересующийся
Отправить личное сообщение для Sk1LL Посмотреть профиль Найти все сообщения от Sk1LL
 
Регистрация: 05.02.2016
Сообщений: 12

вот ссылка на сайт с меню!
для понимания происходящего
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2016, 13:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Sk1LL,
типа тут код будет когда-то ... пятница ... или открывака номер 25...
Ответить с цитированием
  #4 (permalink)  
Старый 05.02.2016, 14:06
Интересующийся
Отправить личное сообщение для Sk1LL Посмотреть профиль Найти все сообщения от Sk1LL
 
Регистрация: 05.02.2016
Сообщений: 12

рони,
Да кстати поздравляю с пятницей! С меня пиво чес-слово! если поможете!
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2016, 12:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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")
    })
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
jquery ui layout + выпадающее меню Sveta jQuery 2 04.12.2012 09:04
Выпадающее меню для внутренней навигации по закладкам на странице на javascript+css rdfhnbhf jQuery 1 13.07.2012 15:17