我对一个看似相对简单的概念有一些严重的困难。
我有两个并排的按钮,排序和过滤。点击一个时,会发生两件事:
这很有效。
现在,我希望第二次点击(如果它位于菜单项上或网页上的任何位置),再次切换(关闭)活动按钮上的 menu-is-open 类。但是有一个例外,如果用第二次点击点击另一个按钮(Filter或Sort),我希望它的功能与现在相同(打开按钮的菜单并关闭活动按钮的菜单)。
var sortResults = $('#bitSort'),
filterResults = $('#bitFilter'),
sortItems = sortResults.find('#cd-main-nav ul'),
filterItems = filterResults.find('#cd-main-nav ul');
//opens or closes the menu when clicking on the SORT button
sortResults.find('.bitTrigger').on('click', function(){
$(this).toggleClass('menu-is-open');
//remove the transitionEnd event handler and FILTER menu if open
sortItems.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
filterItems.removeClass('is-visible');
});
//opens or closes the menu clicking on the FILTER button
filterResults.find('.bitTrigger').on('click', function(){
$(this).toggleClass('menu-is-open');
//remove the transitionEnd event handler and SORT menu if open
filterItems.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
sortItems.removeClass('is-visible');
});
提前致谢!
答案 0 :(得分:3)
尝试向文档添加点击处理程序
$(document).click(function (e) {
if ($(e.target).closest('#bitFilter .bitTrigger, #bitSort .bitTrigger').length) {
return;
}
$('#bitSort .bitTrigger, #bitFilter .bitTrigger').removeClass('menu-is-open');
filterItems.removeClass('is-visible');
sortItems.removeClass('is-visible');
})
演示:Fiddle