Как допилить js для выпадающего меню по клику

 
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1902
Вопрос сложный, знаю. Есть двухуровневое меню. Это обычное меню в двойке с 2 уровнями. Нужно сделать, что при клике на ссылку верхнего уровня открывался второй уровень. Частично вопрос решил таким кодом:

Код JS:
  1. $(document).click( function(event){
  2. if( $(event.target).closest('.folder > ul').length )
  3. return;
  4. $('.folder.more > ul').slideUp(50);
  5. event.stopPropagation();
  6. });
  7. $('.folder.more > a').click( function() {
  8. $(this).siblings('.folder.more > ul').slideToggle(150);
  9. return false;
  10. });
Работает только для ссылки "Еще", когда пунктов больше, чем можно.

Но тут вдруг откуда ни возьмись появилась новая задача - нужно, чтобы это работало нормально для всех пунктов, потому что у них тоже появились вторые уровни.

Если сделать так:

Код JS:
  1. $(document).click( function(event){
  2. if( $(event.target).closest('.folder > ul').length )
  3. return;
  4. $('.folder > ul').slideUp(50);
  5. event.stopPropagation();
  6. });
  7. $('.folder > a').click( function() {
  8. $(this).siblings('.folder > ul').slideToggle(150);
  9. return false;
  10. });
То почти работает. Почти, потому что подменюшки накладываются один на другой. А надо, чтобы при клике по одному пункту, подменю другого пункта закрывалось.

Например, есть у нас такая структура:
Код HTML:
  1. <div id="maimenu">
  2. <ul class="menu">
  3. <li class="folder">
  4. <a class="item">
  5. <span class="wrap">Пункт 1</span>
  6. </a>
  7. <ul>
  8. подменю 1
  9. </ul>
  10. </li>
  11. <li class="folder">
  12. <a class="item">
  13. <span class="wrap">Пункт 2</span>
  14. </a>
  15. <ul>
  16. подменю 2
  17. </ul>
  18. </li>
  19. <li class="folder">
  20. <a class="item">
  21. <span class="wrap">Пункт 3</span>
  22. </a>
  23. <ul>
  24. подменю 3
  25. </ul>
  26. </li>
  27. </ul>
  28. </div>
Нужно сделать так, чтобы при клике по ссылке "Пункт 1" открывалось "подменю 1", при повторном клике чтобы закрывалось. В это же время, если открыто "подменю 2" или "подменю 3" - чтобы они закрывались. Например, кликнули на "Пункт 3", открылось "подменю 3", теперь кликнули на "Пункт 1" - "подменю 3" закрылось, "подменю 1" открылось. Кликнули в любом месте экрана мимо нашего меню - все подменюшки закрылись.

Кто знает? Данке шон.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 3549
Код HTML:
  1.  
  2. var main_menu = $('#maimenu ul.menu');
  3. $('.folder > a', main_menu).on('click', function(){
  4. $('.folder > ul', main_menu).hide(150);
  5. $(this).siblings('.folder > ul').show(150);
  6. return false;
  7. });
Реклама
cms
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1902
Не, нифига. Немного не то.

Если весь мой код заменить Вашим, то тогда подменю вообще не закрывается.
Спойлер
Если же Вашим кодом заменить только вторую часть моего, то при повторном клике подменю не закрывается, а открывается второй раз. И третий. Теперь, чтобы скрыть подменю нужно кликнуть за пределами меню.
Спойлер
А надо, чтобы было так: нажимаем на ссылку - открывается подменю, нажимаем еще раз - закрывается, если открыто, при нажатии на другую ссылку открытое закрывается, если кликнуть за пределами - закрывается.
Спойлер
Редактировалось: 1 раз (Последний: 1 мая 2019 в 17:49)
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1902
АП-плодисменты, товарищи))
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1902
Поможыте люди добрыя!
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2552
Го пример на jsfiddle или подобном.
Делать самому лень.

Нагуглил такую тему https://webformyself.com/forum/index.php/topic/4680/
Там как раз нужный вам closest()
Виджеты, поля и компоненты для instantcms 2 http://www.zau4man.ru/
Посетитель
small user social cms
Медаль
Сообщений: 136
чебурек дохлэй мыш:
нажимаем на ссылку - открывается подменю, нажимаем еще раз - закрывается, если открыто, при нажатии на другую ссылку открытое закрывается, если кликнуть за пределами - закрывается
Как допилить js для выпадающего меню по клику

Как допилить js для выпадающего меню по клику

JS надо почистить... выколупывал от генератора, может чего лишнее есть...
Спойлер
Спойлер
Спойлер
чебурек дохлэй мыш:
если кликнуть за пределами - закрывается
- тут не в курсе*( (надо придумать)
Редактировалось: 1 раз (Последний: 3 мая 2019 в 12:42)
Причин может быть несколько...
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1902
Дмитрий Баринов, у Вас сложно очень.

Zau4man:
Нагуглил такую тему
Блин, как у Вас получилось?)))

Короче, Ваш пример очень помог. Пришлось, правда, в шаблон меню вставку сделать аттрибута rel с уникальным значением для каждого пункта и еще пара вставок. Но это было просто))
Код PHP:
  1. <a rel="i<?php echo $item['id']; ?>" class="item opendm"
  2. ........
  3. <ul class="dropdown-menu i<?php echo $item['id']; ?>">
Остался маа-аааленький нюансик))) При клике на ссылку ей добавляется класс, чтобы подсветить, когда эта кнопка активная, т.е., когда ее подменю открыто. Так вот, если кликнуть по ссылке, то ей добавляется класс openmore, если кликнуть по ней же, то класс удаляется, если кликнуть за пределами меню, то класс удаляется. Все правильно и хорошо. Но если кликнуть по другой ссылке, то класс openmore у текущей нифига не удаляется. Перепробовал 100500 вариантов, не срабатывает нифига))

Спойлер
Вот код:
Код JAVASCRIPT:
  1. var res = $(".dropdown-menu");
  2. $('[rel^="i"]').on("click", funk);
  3.  
  4. $(document).click(function(e) {
  5. if ($(e.target).closest(res).length || $(e.target).closest('.folder > a').length) return;
  6. res.hide();
  7. e.stopPropagation();
  8. $('.folder > a').removeClass('openmore');
  9. });
  10.  
  11. function funk(){
  12. var link = $(this).attr('rel'),
  13. el = $('.dropdown-menu.'+link);
  14. ek = $('.opendm.'+link);
  15. $(this).removeClass('openmore');
  16.  
  17. if(el.css("display") == "none"){
  18. res.hide();
  19. el.slideDown(150);
  20. $(this).addClass('openmore');
  21. } else {
  22. el.hide();
  23. }
  24. }
Как в нем сделать так, чтобы при клике по другой ссылке у текущей удалялся класс openmore
Редактировалось: 3 раз (Последний: 3 мая 2019 в 14:14)
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1902
Решение вот (может кому-нибудь пригодится):

1. В файле templates/шаблон/assets/ui создать файл menu-dropdown.tpl.php, скопировать в него код из файла menu.tpl.php. Найти в нем
Код PHP:
  1.  
  2. <a class="item" <?php echo $data_attr; ?> href="<?php echo !empty($item['url']) ? htmlspecialchars($item['url']) : 'javascript:void(0)'; ?>" <?php if ($onclick) { ?>onclick="<?php echo $onclick; ?>"<?php } ?> <?php if ($target) { ?>target="<?php echo $target; ?>"<?php } ?>>
и заменить на
Код PHP:
  1. <a rel="i<?php echo $item['id']; ?>" class="item opendm" <?php echo $data_attr; ?> href="<?php echo !empty($item['url']) ? htmlspecialchars($item['url']) : 'javascript:void(0)'; ?>" <?php if ($onclick) { ?>onclick="<?php echo $onclick; ?>"<?php } ?> <?php if ($target) { ?>target="<?php echo $target; ?>"<?php } ?>>
Еще в этом же файле найти
Код PHP:
  1. <?php if ($item['childs_count'] > 0) { ?><ul><?php } ?>
и заменить на
Код PHP:
  1. <?php if ($item['childs_count'] > 0) { ?><ul class="dropdown-menu i<?php echo $item['id']; ?>"><?php } ?>
В самый низ этого файла вставить:

Код JAVASCRIPT:
  1. <script language="JavaScript">
  2. (function($){
  3. var res = $(".dropdown-menu");
  4. $('[rel^="i"]').on("click", funk);
  5.  
  6. $(document).click(function(e) {
  7. if ($(e.target).closest(res).length || $(e.target).closest('.folder > a').length) return;
  8. res.hide();
  9. e.stopPropagation();
  10. $('.openmore').removeClass('openmore');
  11. });
  12.  
  13. function funk(){
  14. var link = $(this).attr('rel'),
  15. el = $('.dropdown-menu.'+link);
  16. ek = $('.opendm.'+link);
  17. $(this).removeClass('openmore');
  18.  
  19. if(el.css("display") == "none"){
  20. res.hide();
  21. el.slideDown(150);
  22. $('.openmore').removeClass('openmore');
  23. $(this).addClass('openmore');
  24. } else {
  25. el.hide();
  26. }
  27. }
  28. })(jQuery);
  29. </script>
В настройках виджета меню во вкладке "Опции" выбрать шаблон списка меню

Как допилить js для выпадающего меню по клику
И сохранить. Стили добавить по вкусу.

Всем спасибо! Решено.
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: