У меня есть следующий HTML и JS. Когда вы нажимаете .slidedown-toggle
он переключает класс "open" на родительский (.slidedown
) и применяет к нему высоту sibling (.nav-sub
). Это работает, но то, что не работает, устанавливает высоту назад до 0, когда этот "открытый" класс отсутствует. Что мне не хватает?
HTML
<li class="slidedown">
<a href="#">Parent Link</a>
<!-- Dropdown arrow -->
<span class="slidedown-toggle">
<span class="caret"></span>
</span>
<!-- Submenu -->
<ul class="nav nav-sub">
<li>
<a href="#">Child Menu Item 1</a>
</li>
</ul>
</li>
JS
$(function navCollapse(){
var slidedownToggle = $( '#global-nav .slidedown-toggle' );
slidedownToggle.click( function() {
var slidedown = $(this).parent( '.slidedown' );
var navOpen = $( '#global-nav li.open' );
var subnav = $(this).siblings( '.nav-sub' );
var subnavHeight = subnav.height();
slidedown.toggleClass( 'open' );
if (navOpen){
subnav.height( subnavHeight );
}else{
subnav.height( 0 );
}
});
});
$( '#global-nav li.open' )
вернет объект jQuery, который всегда будет правдивым, вам нужно проверить, имеет li
элемент li
к которому принадлежит текущий элемент toggle, открытый класс.
Вы можете использовать.closest(), чтобы найти элемент li
а затем использовать.hasClass(), чтобы проверить, присутствует ли класс
$(function navCollapse() {
var slidedownToggle = $('#global-nav .slidedown-toggle');
slidedownToggle.click(function () {
var slidedown = $(this).parent('.slidedown');
var $li = $(this).closest('li');
var subnav = $(this).siblings('.nav-sub');
var subnavHeight = subnav.height();
slidedown.toggleClass('open');
if ($li.hasClass('open')) {
subnav.height(0);
} else {
subnav.height(subnavHeight);
}
});
});
var $gNav = ('#global-nav');
$('.slidedown-toggle', $gNav).click( function( e ) {
var myLI = $(this).closest('.slidedown');
var isON = myLI.hasClass('open');
// ALL
$('li.open', $gNav).removeClass('open').find('.nav-sub').slideUp();
// THIS
myLI.toggleClass('open', !isON).find('.nav-sub').stop().slideToggle();
});
subnav = $(this).siblings( '.nav-sub' );
все ваши .subnav elements
? зачем?