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

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

#1 1 мая 2019 в 15:30

Вопрос сложный, знаю. Есть двухуровневое меню. Это обычное меню в двойке с 2 уровнями. Нужно сделать, что при клике на ссылку верхнего уровня открывался второй уровень. Частично вопрос решил таким кодом:

		$(document).click( function(event){
			if( $(event.target).closest('.folder > ul').length ) 
			return;
			$('.folder.more > ul').slideUp(50);
			event.stopPropagation();
		});
		$('.folder.more > a').click( function() {
			$(this).siblings('.folder.more > ul').slideToggle(150);
			return false;
		});

Работает только для ссылки "Еще", когда пунктов больше, чем можно.

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

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

		$(document).click( function(event){
			if( $(event.target).closest('.folder > ul').length ) 
			return;
			$('.folder > ul').slideUp(50);
			event.stopPropagation();
		});
		$('.folder > a').click( function() {
			$(this).siblings('.folder > ul').slideToggle(150);
			return false;
		});

То почти работает. Почти, потому что подменюшки накладываются один на другой. А надо, чтобы при клике по одному пункту, подменю другого пункта закрывалось.

Например, есть у нас такая структура:

<div id="maimenu">
	<ul class="menu">
		<li class="folder">
			<a class="item">
				<span class="wrap">Пункт 1</span>
			</a>
			<ul>
				подменю 1
			</ul>
		</li>
		<li class="folder">
			<a class="item">
				<span class="wrap">Пункт 2</span>
			</a>
			<ul>
				подменю 2
			</ul>
		</li>
		<li class="folder">
			<a class="item">
				<span class="wrap">Пункт 3</span>
			</a>
			<ul>
				подменю 3
			</ul>
		</li>
	</ul>
</div>

Нужно сделать так, чтобы при клике по ссылке "Пункт 1" открывалось "подменю 1", при повторном клике чтобы закрывалось. В это же время, если открыто "подменю 2" или "подменю 3" — чтобы они закрывались. Например, кликнули на "Пункт 3", открылось "подменю 3", теперь кликнули на "Пункт 1" — "подменю 3" закрылось, "подменю 1" открылось. Кликнули в любом месте экрана мимо нашего меню — все подменюшки закрылись.

Кто знает? Данке шон.

t.me/googleindexingapi

#2 1 мая 2019 в 16:31

 
<script>
    var main_menu = $('#maimenu ul.menu');
    $('.folder > a', main_menu).on('click', function(){
        $('.folder > ul', main_menu).hide(150);
        $(this).siblings('.folder > ul').show(150);
        return false;
    });
</script>

#3 1 мая 2019 в 17:47

Не, нифига. Немного не то.

Если весь мой код заменить Вашим, то тогда подменю вообще не закрывается.

Спойлер

Если же Вашим кодом заменить только вторую часть моего, то при повторном клике подменю не закрывается, а открывается второй раз. И третий. Теперь, чтобы скрыть подменю нужно кликнуть за пределами меню.

Спойлер

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

Спойлер

t.me/googleindexingapi

Сегодня в 18:11

#4 2 мая 2019 в 13:06

АП-плодисменты, товарищи))

t.me/googleindexingapi

#5 3 мая 2019 в 11:52

Поможыте люди добрыя!

t.me/googleindexingapi

#6 3 мая 2019 в 12:11

Го пример на jsfiddle или подобном.
Делать самому лень.

Нагуглил такую тему webformyself.com/forum/index.php/topic/4680/
Там как раз нужный вам closest()

Разработка виджетов, полей и компонентов для instantcms 2, сайты под ключ. site: www.zau4man.ru telegram: @zau4man

#7 3 мая 2019 в 12:41

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

JS надо почистить… выколупывал от генератора, может чего лишнее есть...

Спойлер

 
<script>
 
var Control = (function ($) {
    'use strict';
    return (function () {
        this.init = function(label, type, callback) {
            var chAttr = label.find('input[type="' +type + '"]').attr('checked');
            if (chAttr === 'checked') {
              label.addClass('cms-checked');
            }
 
            label.mouseleave(function () {
              $(this).removeClass('hovered').removeClass('active');
            });
            label.mouseover(function () {
              $(this).addClass('hovered').removeClass('active');
            });
            label.mousedown(function (event) {
              if (event.which !== 1) {
                  return;
              }
              $(this).addClass('active').removeClass('hovered');
            });
            label.mouseup(function (event) {
              if (event.which !== 1) {
                  return;
              }
              callback.apply(this);
              $(this).removeClass('active').addClass('hovered');
            });
        };
    });
})(jQuery);
 
jQuery(function($) {
    'use strict';
    if (!$('html').hasClass('ie7')) {
        return;
    }
    $('ul.cms-vmenu li:not(:first-child),ul.cms-vmenu li li li:first-child,ul.cms-vmenu>li>ul').each(function () { $(this).append('<div class="cms-vmenu-separator"> </div><div class="cms-vmenu-separator-bg"> </div>'); });
});
 
jQuery(function() {
    'use strict';
    setOpenSubmenuWithNoReload({vMenuClass: "cms-vmenu", activeClass: "active", hoveredClass: "hovered"});
});
 
var setOpenSubmenuWithNoReload = (function($) {
    'use strict';
    return (function(vMenuInfo) {
        $("ul." + vMenuInfo.vMenuClass + " li").each(function () {
            var item = $(this);
            item.children("a").bind("click", function(e) {
                var link = $(this);
                var simple = link.siblings("ul").length === 0;
                link.parent().siblings().children("ul." + vMenuInfo.activeClass).slideUp(function() {
                    $(this).find("li, a, ul").removeClass(vMenuInfo.activeClass);
                    $(this).removeClass(vMenuInfo.activeClass).siblings("a").removeClass(vMenuInfo.activeClass);
                    $(this).css("display", "");
                });
                link.parent().siblings().children("a." + vMenuInfo.activeClass).removeClass(vMenuInfo.activeClass);
                link.parent().siblings().removeClass(vMenuInfo.activeClass);
                if (simple && !link.hasClass(vMenuInfo.activeClass)) {
                    link.addClass(vMenuInfo.activeClass).parent().addClass(vMenuInfo.activeClass);
                }
                if (!simple) {
                    if (link.hasClass(vMenuInfo.activeClass)) {
                        link.siblings("ul").slideUp("fast", function() {
                            $(this).removeClass(vMenuInfo.activeClass).siblings("a").removeClass(vMenuInfo.activeClass).parent().removeClass(vMenuInfo.activeClass);
                            $(this).css("display", "");
                        });
                    } else {
                        link.siblings("ul").slideDown("fast", function() {
                            $(this).addClass(vMenuInfo.activeClass).siblings("a").addClass(vMenuInfo.activeClass).parent().addClass(vMenuInfo.activeClass);
                            $(this).css("display", "");
                        });
                    }
 
                    e.preventDefault();
                    return false;
                }
            });
        });
    });
})(jQuery);
 
</script>

Спойлер

 
<style>
.cms-vmenublockcontent {
    margin: 0 auto;
}
 
ul.cms-vmenu, ul.cms-vmenu ul {
    list-style: none;
    display: block;
}
 
ul.cms-vmenu, ul.cms-vmenu li {
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    line-height: 0;
}
 
ul.cms-vmenu {
    margin-top: 0;
    margin-bottom: 0;
}
 
ul.cms-vmenu ul {
    display: none;
    margin: 0;
    padding: 0;
    position: relative;
}
 
ul.cms-vmenu ul.active {
    display: block;
}
 
ul.cms-vmenu>li>a {
    background: #262626;
    padding: 0 15px;
    margin: 0 auto;
    color: #8F8F8F;
    min-height: 30px;
    line-height: 30px;
}
 
ul.cms-vmenu a {
    display: block;
    cursor: pointer;
    z-index: 1;
    font-size: 13px;
    font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    position: relative;
}
 
ul.cms-vmenu li {
    position: relative;
}
 
ul.cms-vmenu>li {
    margin-top: 0;
}
 
ul.cms-vmenu>li>ul {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}
 
ul.cms-vmenu>li:first-child {
    margin-top: 0;
}
 
ul.cms-vmenu>li>a:hover, ul.cms-vmenu>li>a.active:hover {
    background: #35A9D0;
    padding: 0 15px;
    margin: 0 auto;

                    
        
                                        
                                            
                                                                                        

        
                    
                            
            

    
                    
                0

#8 3 мая 2019 в 13:56

Дмитрий Баринов, у Вас сложно очень.

Нагуглил такую тему
Zau4man

Блин, как у Вас получилось?)))

Короче, Ваш пример очень помог. Пришлось, правда, в шаблон меню вставку сделать аттрибута rel с уникальным значением для каждого пункта и еще пара вставок. Но это было просто))

<a rel="i<?php echo $item['id']; ?>" class="item opendm" 
........
<ul class="dropdown-menu i<?php echo $item['id']; ?>">

Остался маа-аааленький нюансик))) При клике на ссылку ей добавляется класс, чтобы подсветить, когда эта кнопка активная, т.е., когда ее подменю открыто. Так вот, если кликнуть по ссылке, то ей добавляется класс openmore, если кликнуть по ней же, то класс удаляется, если кликнуть за пределами меню, то класс удаляется. Все правильно и хорошо. Но если кликнуть по другой ссылке, то класс openmore у текущей нифига не удаляется. Перепробовал 100500 вариантов, не срабатывает нифига))

Спойлер

Вот код:

		var res = $(".dropdown-menu");
		$('[rel^="i"]').on("click", funk);
 
		$(document).click(function(e) {
			if ($(e.target).closest(res).length || $(e.target).closest('.folder > a').length) return;
			res.hide();
			e.stopPropagation();
			$('.folder > a').removeClass('openmore');
		});
 
		function funk(){
			var link = $(this).attr('rel'),
			el = $('.dropdown-menu.'+link);
			ek = $('.opendm.'+link);			
			$(this).removeClass('openmore'); 
 
			if(el.css("display") == "none"){
				res.hide();
				el.slideDown(150);    
				$(this).addClass('openmore');
			} else {
				el.hide();
			}
		}

Как в нем сделать так, чтобы при клике по другой ссылке у текущей удалялся класс openmore

t.me/googleindexingapi

#9 3 мая 2019 в 14:31

Решение вот (может кому-нибудь пригодится):

1. В файле templates/шаблон/assets/ui создать файл menu-dropdown.tpl.php, скопировать в него код из файла menu.tpl.php. Найти в нем

 
<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 } ?>>

и заменить на

<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 if ($item['childs_count'] > 0) { ?><ul><?php } ?>

и заменить на

<?php if ($item['childs_count'] > 0) { ?><ul class="dropdown-menu i<?php echo $item['id']; ?>"><?php } ?>

В самый низ этого файла вставить:

<script language="JavaScript">
	(function($){
		var res = $(".dropdown-menu");
		$('[rel^="i"]').on("click", funk);
 
		$(document).click(function(e) {
			if ($(e.target).closest(res).length || $(e.target).closest('.folder > a').length) return;
			res.hide();
			e.stopPropagation();
			$('.openmore').removeClass('openmore');
		});
 
		function funk(){
			var link = $(this).attr('rel'),
			el = $('.dropdown-menu.'+link);
			ek = $('.opendm.'+link);			
			$(this).removeClass('openmore'); 
 
			if(el.css("display") == "none"){
				res.hide();
				el.slideDown(150);
				$('.openmore').removeClass('openmore');   
				$(this).addClass('openmore');
			} else {
				el.hide();
			}
		}
	})(jQuery);
</script>

В настройках виджета меню во вкладке "Опции" выбрать шаблон списка меню

И сохранить. Стили добавить по вкусу.

Всем спасибо! Решено.

t.me/googleindexingapi

rostgrup5 + inplayer

Как реализовать: вставка анонс

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

Похожие темы

Как исправить? В выпадающем chosen на мобилке не показывается плесхолдер "Выбрать".

[ЕСТЬ РЕШЕНИЕ] Главное меню перекрывает Выпадающее меню пользователя

[ЕСТЬ РЕШЕНИЕ] Помогите допилить кодик (скрыть автора)

Как на стене группы публиковать фотографии, чтобы по клику они увеличивались на весь размер?

Блок поделиться от яндекса не раскрывается по клику

Конструктор тем: выпадающее меню пользователя

InstantCMS Team

О проекте

Поддержка

Дополнения