第二次单击jQuery再次在页面-toggleClass上的任何位置

时间:2015-03-09 05:17:38

标签: jquery

我对一个看似相对简单的概念有一些严重的困难。

我有两个并排的按钮,排序和过滤。点击一个时,会发生两件事:

  1. 在按钮上切换课程 menu-is-open ,以显示或隐藏按钮的菜单。
  2. 从相反的按钮中移除可见类,以确保两个菜单不会同时打开。
  3. 这很有效。

    现在,我希望第二次点击(如果它位于菜单项上或网页上的任何位置),再次切换(关闭)活动按钮上的 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');
    });
    

    提前致谢!

1 个答案:

答案 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