无法完成此 jQuery .slideUp 代码

Question

好吧，首先我是 jQuery 的新手（我的背景纯粹是 HTML5 / CSS3 和图形）。无论如何，我正在开发一个像手风琴一样打开和关闭的 jQuery 菜单（尝试同时学习）。

菜单的第一部分可以使用了。当有人点击带有子菜单的顶级 link 时，它会将 'top-level-active' class 分配给父 li（列表项），然后它使用 .slideDown 函数并打开子菜单-菜单。

现在，为了关闭子菜单，我需要完成“.slideUp”部分，但不知何故我似乎卡在了代码上。到目前为止，这是我所拥有的，但我担心我的语法远非正确...

https://jsfiddle.net/digitalsky/undjdrg8/9/

function accordion_menus(){

// if we are not on mobile (menu icon is hidden) show sub items and bail
if ( jQuery('#primary-navigation .menu-toggle').is(':hidden') ){
// show sub menus
jQuery('#primary-navigation ul.nav-menu ul.sub-menu').show();
return;
} else{
// hide sub menus
jQuery('#primary-navigation ul.nav-menu ul.sub-menu').hide();
}

// top level nav click function
jQuery('#primary-navigation ul.nav-menu > li > a').click(function(e){

// store parent li to variable
var parent_li = jQuery(this).parent('li');

// if sub menu does not exist in parent li
if ( !jQuery('ul.sub-menu', parent_li).first().length ) {
    return;
}

// if sub menu is already active, bail
if ( parent_li.hasClass('sub-menu-active') ){
    return;
}

// stop link click
e.preventDefault();

// store current sub menu in variable
var current_submenu = jQuery('ul.sub-menu', parent_li).first();

// slide up non-current sub menus
jQuery('#primary-navigation ul.nav-menu > li > ul.sub-menu').not(current_submenu).slideUp(function(){

    // remove sub-menu-active class from all first level items except current parent li
    jQuery('#primary-navigation ul.nav-menu > li').not(parent_li).removeClass('sub-menu-active');

});

// slide down current sub menu
current_submenu.slideDown(100, function(){
    // add sub-menu-active to current parent li
    parent_li.addClass('sub-menu-active');
});

});

// second level nav click function
jQuery('#primary-navigation ul.nav-menu ul.sub-menu > li > a').click(function(e){

// store parent li to variable
var parent_li = jQuery(this).parent('li');

// if sub menu does not exist in parent li
if ( !jQuery('ul.sub-menu', parent_li).first().length ) {
    return;
}

// if sub menu is already active, bail
if ( parent_li.hasClass('sub-menu-active') ){
    return;
}

// stop link click
e.preventDefault();

// store current sub menu in variable
var current_submenu = jQuery('ul.sub-menu', parent_li).first();

// slide up non-current sub menus
jQuery('#primary-navigation ul.nav-menu ul.sub-menu > li > ul.sub-menu').not(current_submenu).slideUp(function(){

    // remove sub-menu-active class from all second level items except current parent li
    jQuery('#primary-navigation ul.nav-menu ul.sub-menu > li').not(parent_li).removeClass('sub-menu-active');

});

// slide down current sub menu
current_submenu.slideDown(100, function(){
    // add sub-menu-active to current parent li
    parent_li.addClass('sub-menu-active');
});

});

}

长话短说，我只是希望 'Course Schedule' link 在您单击它时打开子菜单（目前确实如此），但在您单击时也关闭子菜单又来了。

我在脑海里一遍又一遍地思考这个问题，它看起来很简单，但我一定是把它复杂化了。

也许我在这里偏离了轨道，但我正在学习。

Answer 1

您的 js 仅在运行时才知道 dom 的当前状态。

这意味着当此代码为运行时，它不会看到任何具有 class 子菜单活动的父项，因为当时未设置此 class。

它实际上永远不会运行您想要在点击函数中使用的代码，因为它没有将点击事件侦听器附加到 future 元素。

要解决此问题，您需要创建一个函数来检查您想要的内容，然后在该函数内设置 .click(function....。

EG...

function checkSlideUp(){
if ( parent_li.hasClass('sub-menu-active') ){
    jQuery('#primary-navigation ul.nav-menu > li > a').off('click').on('click', function(e){

// store parent li to variable
var parent_li = jQuery(this).parent('li');

// store current sub menu in variable
var current_submenu = jQuery('ul.sub-menu', parent_li).first();

    // slide up current sub menu
    current_submenu.slideUp(function(){
        // remove sub-menu-active to current parent li
        parent_li.removeClass('sub-menu-active');


    });
});
}
}

如果你调用checkSlideUp();添加子菜单活动 class 后（在您的其他功能中），这将再次检查 dom 以查看是否需要在此时应用它。

无法完成此 jQuery .slideUp 代码

Trouble completing this jQuery .slideUp code

jquery

accordion

jquery-ui-accordion