如何在jQuery中移除slideUp效果

Question

我想要移除这些幻灯片向上展开的功能。

$( document ).ready(function() {
    $("#tabBar ul.buttons > li > a").on("click", function(e){
        //if submenu is hidden, does not have active class
        if(!$(this).hasClass("active")) {

            // hide any open menus and remove active classes
            $("#tabBar ul.buttons li ul").slideUp(350);
            $("#tabBar ul.buttons li a").removeClass("active");

            // open submenu and add the active class
            $(this).next("ul").slideDown(350);
            $(this).addClass("active");

        //if submenu is visible
        }else if($(this).hasClass("active")) {

            //hide submenu and remove active class
            $(this).removeClass("active");
            $(this).next("ul").slideUp(350);
        }
    });
});

当我通过jQuery向body添加另一个div时

$(document).ready(function(){
    $(".Collapse_menu").click(function(){
        $(".bodyStatic").toggleClass("collapse-body");
        //comment: here i want to add my code so that when i call collapse-body the top slide up function should remove
    });
});

我正在制作一个可折叠的菜单，这里是帮助您更好理解的图片。

- moidul dargahi

---

你必须在某种条件下触发.slideUp()，否则不执行。 - Hemal

我不是很擅长JavaScript，怎么办？ - moidul dargahi

Answer 1

这是我的尝试。

if($(".bodyStatic").hasClass("collapse-body"))
{
    //DO NOTHING
}
else
{
    $(this).next("ul").slideUp(350);
}

//OR VICE VERSA

- Hemal

---

我需要写什么来代替“do nothing”...以便我可以移除slideUp函数。 - moidul dargahi

如果您的条件满足具有 .collapse-body 类，则可以将除 .slideUp() 之外的所有内容放在其中。 - Hemal

Answer 2

根据我的理解，每当您单击 .Collapse_menu 时，您希望折叠水平展开的菜单并关闭垂直展开的子菜单。如果是这种情况，则可以尝试以下代码：

代码1：

$( document ).ready(function() {
    $("#tabBar ul.buttons > li > a").on("click", function(e){

        if($(".bodyStatic").hasClass("collapse-body"))
        {
            $(".bodyStatic").removeClass("collapse-body")
        }
        //if submenu is hidden, does not have active class
        if(!$(this).hasClass("active")) {

            // hide any open menus and remove active classes
            $("#tabBar ul.buttons li ul").slideUp(350);
            $("#tabBar ul.buttons li a").removeClass("active");

            // open submenu and add the active class
            $(this).next("ul").slideDown(350);
            $(this).addClass("active");

        //if submenu is visible
        }else if($(this).hasClass("active")) {

            //hide submenu and remove active class
            $(this).removeClass("active");
            $(this).next("ul").slideUp(350);
        }
    });
});

Code2:

$(document).ready(function(){
    $(".Collapse_menu").click(function(){
        $(".bodyStatic").toggleClass("collapse-body");

        var activeSubmenu = $("#tabBar ul.buttons > li > a.active"); //grab the active submenu if any
        //hide submenu and remove active class
        $(activeSubmenu).removeClass("active");
        $(activeSubmenu).next("ul").slideUp(350);
    });
});

请告知结果。

- vijayP

---

不，我只是尝试了你的代码，但它没有起作用...这和以前一样。 - moidul dargahi

好的，等一下我会将它上传到我的服务器并在5分钟内给您发送链接。 - moidul dargahi

@moiduldargahi - 你能否尝试用这两段代码替换你的两段代码。我希望它们能按照要求工作。 - vijayP

是的，它可以工作，但是请看这些图片，出现了一个小问题。 http://www.evernote.com/shard/s671/sh/65e8817c-9eb4-4c59-bdd0-a833b41d5635/5b26a10fea52f6942eb35576188a1dfc - moidul dargahi

让我们在聊天中继续这个讨论。点击此处进入聊天室。 - vijayP