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

切换JQuery下拉菜单

1 个答案: