切換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();
}