切换JQuery下拉菜单

Question

我有一个下拉菜单，该菜单根据选择的类具有不同的高度-一排，两排，三排。

该网站的主要内容也会根据这些类的动画设置。

我还实现了一个功能，如果用户在菜单外部单击，则会使菜单重置。

一切都按要求工作，但事实是，如果再次单击该链接，则无法使用“ toggleClass”关闭菜单。

你们中任何一个JQuery专家都可以在这里帮助我吗？

// ============================================================
//
//  DROP DOWN MENU
//
// ============================================================
$('.submenu-toggle').on('click', function (e) {

    // Reset all other drop downs and icons
    $('.submenu').removeClass('drop-down');
    $('.submenu-toggle').find('.fa-angle-down').removeClass('rotate');

    // Drop down this menu
    $(this).find('.submenu').addClass('drop-down');

    // Rotate the icon
    $(this).find('.fa-angle-down').addClass('rotate');

    // Drop the main content wrapper down depending on the 
    // number of rows in the drop-down menu
    if ($(this).find('.submenu').hasClass('one-row')) {
        $('.content-wrapper').addClass('one-row-drop-down');
        $('.content-wrapper').removeClass('two-row-drop-down three-row-drop-down four-row-drop-down');
    } 
    if ($(this).find('.submenu').hasClass('two-row')) {
        $('.content-wrapper').addClass('two-row-drop-down');
        $('.content-wrapper').removeClass('one-row-drop-down three-row-drop-down four-row-drop-down');
    }
    if ($(this).find('.submenu').hasClass('three-row')) {
        $('.content-wrapper').addClass('three-row-drop-down');
        $('.content-wrapper').removeClass('one-row-drop-down two-row-drop-down four-row-drop-down');
    }

    e.stopPropagation();
});


// Reset dropdowns and reset icon on click outside
$(document).on('click', function () {
    $('.submenu').removeClass('drop-down');
    $('.submenu-toggle').find('.fa-angle-down').removeClass('rotate');
    $('.content-wrapper').removeClass('one-row-drop-down two-row-drop-down three-row-drop-down');
});

Answer 1

您需要使用jQuery切换

http://api.jquery.com/toggle/

请参阅此处的一些示例http://api.jquery.com/toggle/#entry-examples

$( "#foo" ).toggle( display );

等效于：

if ( display === true ) {
  $( "#foo" ).show();
} else if ( display === false ) {
  $( "#foo" ).hide();
}