我有一个没有正确触发的第三级导航演示, 不知道我哪里遗漏了什么
JS:
$(function(){
$(".dropdown-menu").css("height","auto");
$("#navigation div > .mobile-drop-button").on("click",function(e){
alert('1st level');
e.preventDefault();
if(!$(this).next().next().hasClass("current")){
$(".dropdown-menu").removeClass("current");
$(".dropdown-menu").slideUp();
$(this).next().next().addClass("current");
$(this).find('img').attr('src','/sites/all/themes/enfamil_base/assets/images/up_arrow_white.png');
$(this).parent().siblings().find('img').attr('src','/sites/all/themes/enfamil_base/assets/images/down_arrow_white.png');
$(".current").slideToggle();
}
else{
$(this).next().next().slideUp();
$(this).next().next().removeClass("current");
}
e.stopImmediatePropagation();
});
});
/*****
3rd level SUB NAVIGATION STARTS
******************/
$('a.mobile-drop-button.sub img').on("click", function(e){
alert('3rd level');
$(this).addClass('activeSubNav')
$(".dropdown-menu-sub").show();
e.preventDefault();
})
/*****
SUB NAVIGATION ENDS
******************/
感谢您的帮助!
谢谢!
答案 0 :(得分:1)
我已经使用jQuery“slideToggle& sibblings()”解决了这个问题,因为这个HTML太复杂了,我找不到正确的DOM流。
最后修正:-) JS:
$('#navigation .mobile-drop-button-sub').on('click', function(){
var abc = $(this).closest('.menu-option-sub').find('.dropdown-menu-sub').css({'height':'auto'}).height();
//$(this).closest('.menu-option-sub').find('.dropdown-menu-sub').closest('ul.dropdown-menu').css({'height': height + abc})
$(this).closest('.menu-option-sub').find('.dropdown-menu-sub').closest('ul.dropdown-menu').css({'height': height + abc})
$(this).closest('.menu-option-sub').find('ul.dropdown-menu-sub').slideToggle('fast', function(){
$(this).css('height', abc);
$(this).closest('.menu-option-sub').siblings().find('ul.dropdown-menu-sub').css('display','none');
/* $(this).closest('.menu-option-sub').parent('ul.dropdown-menu').css({
'height':'auto'
}); */
$(this).closest('.menu-option-sub').parent('ul.dropdown-menu').css({
'height':'auto'
});
});
})