10 октября 2014 в 15:00
Есть мобильное дропдаун меню с такой версткой:
Свой OpenSource проект (вернее мизерная часть), скоро выложу. Но блин тут совсем какой-то исхитриться надо(
<nav class="topbar">
<ul>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li class="dropdown">
<a class="no-close" href="#">Пункт дропдауна</a>
<ul>
<li class="back"><<<<<</li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li class="dropdown">
<a class="no-close" href="#">Пункт дропдауна</a>
<ul>
<li class="back"><<<<<</li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Пункт</a></li>
</ul>
</nav>
<ul>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li class="dropdown">
<a class="no-close" href="#">Пункт дропдауна</a>
<ul>
<li class="back"><<<<<</li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li class="dropdown">
<a class="no-close" href="#">Пункт дропдауна</a>
<ul>
<li class="back"><<<<<</li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Пункт</a></li>
</ul>
</nav>
Вот код jquery. Косяки в коментах.
$('.topbar li:not(.dropdown, .toggle, .back)').bind('click', function() {
$(this).closest('.topbar').removeClass('open');
$(this).closest('ul.open').removeClass('open');
});
$('.topbar li.dropdown').bind('click', function(e) {
if ($(e.target).is('a.no-close')) {
$(this).children('ul').addClass('open'); // А вот он походу и перебивает!
if ($(this).parent('ul.open').length) {
$(this).parent('ul.open').removeClass('open'); // не убирает класс, так как срабатывает другое событие и перебивает его.
}
}
});
$('.topbar li.back').bind('click', function() {
$(this).parent('ul.open').removeClass('open');
});
Проблема в следующем:
Так как li.dropdown является родителем, то ясен пень клик считается по нему даже если я нажал на 3м уровне но тоже по li.dropdown.
Что надо в идеале.
При нажатии на li.dropdown в его > ul добавляем класс .open (работает), и если есть родитель ul.open убираем (закрыть меню) у него класс .open (не работает).
Почему не работает:
Допустим при нажатии на li.dropdown 3го уровня, он добавляет .open ко ВСЕМ! li.dropdown. Это и есть единственный косяк.
Комментарии
Это меню для мобильников. Короче при нажатии на li.dropdown должно выезжать сбоку дочернее подменю > ul (добавляю класс .open). Оно и выезжает, то только 1 уровень, а дальше ппц. При нажатии на открывашку 2го уровня, сам второй уровень отрабатывается, но .open с родительского меню не убирается, и получается юзер не видит нужный уровень.
Я не спец по джедай квери.
Нет. Его надо закрыть (убрать). Стоп... бабуйня. При клике на .back надо же вернуться к родительскому меню. Тогда не надо закрывать родительское меню. Я просто обрежу всё меню по высоте открытого меню. Щас похимичу и скажу что выйдет.
Спасибо, меню вообще шикарное вышло)
Я правда разметку переписал и .open к li.dropdown стал прикручивать, а то верстка не сходилась.
Скоро бета будет)