在幻灯片打开之前添加类并在幻灯片关闭后使用 slideToggle 删除类？答案

【问题标题】：Add Class before slide open and remove class after slide close using slideToggle?在幻灯片打开之前添加类并在幻灯片关闭后使用 slideToggle 删除类？
【发布时间】：2012-05-03 04:20:16
【问题描述】：

我正在使用 jQuery 在单击链接时滑动打开和关闭菜单，效果很好。但是，我试图在菜单滑动打开之前单击链接时添加一个类，然后在菜单滑动关闭后删除相同的类。

所以：点击 > addClass > 滑动菜单打开 > 再次点击 > 滑动菜单关闭 > removeClass

    $("#categoryNav").hide();
    $('#showHideLink').click(function(){
        $("#categoryNav").slideToggle(function() { 
            $('#showHideLink').toggleClass("catMenuOpen");
            $('#mainNav').toggleClass("catMenuOpen");
        });
    });

我尝试在slideToggle 函数之前添加$('#mainNav'.addClass('catMenuOpen');，而不是使用toggleClass，这在第一次点击时给了我正确的效果，但我不知道如何在导航之后删除类又关门了。

干杯

编辑： 这是我的 HTML：

    <div id="mainNav">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a id="showHideLink">Show Hide</a></li>
        </ul>
    </div>
    <div id="categoryNav">
        <ul>
            <li><a href="#">CatMenu</a></li>
        </ul>
    </div>

【问题讨论】：

catMenuOpen 类应该应用于哪些元素？ showHideLink 和 mainNav?
是的，两者都有。但是在此过程中，可以随时从showHideLink 添加/删除catMenuOpen。我主要关心catMenuOpen何时应用于mainNav。
@Bryan 能否在这里提供你的html代码，我们会给出准确的答案

标签： jquery slidetoggle

【解决方案1】：

这将按照您要求的顺序进行：

$('#showHideLink').click(function(){

    if (!$("#categoryNav").is(":visible"))
        $('#showHideLink, #mainNav').addClass("catMenuOpen");

    $("#categoryNav").slideToggle(function() { 
        if (!$("#categoryNav").is(":visible"))
            $('#showHideLink, #mainNav').removeClass("catMenuOpen");
    });
});

编辑

在jsfiddle查看它

【讨论】：

谢谢！干净简单，工作起来就像一个魅力。 :) 我不知道 :visible 选择器，很高兴知道。

【解决方案2】：

尝试以下方法：

$('#showHideLink').click(function(){
    if($(this).hasClass("catMenuOpen"){
       $(this).removeClass("catMenuOpen");
    }else
       $(this).addClass("catMenuOpen");
    $("#categoryNav").slideToggle(function() { 
        $('#showHideLink').toggleClass("catMenuOpen");
        $('#mainNav').toggleClass("catMenuOpen");
    });

我不完全确定上面的代码会 100% 工作，因为我没有机会实际测试它，但我的想法是，如果元素具有“开放”类，那么你想删除它（因为您再次单击并关闭了 div）。如果您单击并且该元素没有“open”类，那么您希望将其添加到 div。

【讨论】：

【解决方案3】：

试试这个，希望对你有帮助

$('#showHideLink').click(function(){

    $("#categoryNav").slideToggle(function() { 
        var property = $('#categoryNav').css('display');
        if(property == 'block')
        $('#showHideLink, #mainNav').addClass("catMenuOpen");
        else
        $('#showHideLink, #mainNav').removeClass("catMenuOpen");
    });
});

这是小提琴http://jsfiddle.net/eh6jv/1/

【讨论】：

【解决方案4】：

尝试创建一个具有类名的字符串数组，然后在每次点击时，切换数组值的黑白..

<script>
var i=0;
var classes = new Array("catMenuClose","catMenuOpen");
$("#categoryNav").hide();
$('#showHideLink').click(function(){
    i=i*(-1)+1;
    $("#categoryNav").slideToggle(function() { 
        $('#showHideLink').toggleClass(classes[i]);
        $('#mainNav').toggleClass(classes[i]);
    });
});
</script>

【讨论】：

【解决方案5】：

我只是在寻找其他东西时遇到了这个问题。这是一个有效的代码。

/===================脚本从这里开始 ====================/

(function($){    
    $(document).ready(function() {
        $('#open_sidebar').click(function() {       
           if(!$(this).hasClass("open")) {
             $("#open_sidebar").toggleClass("open").removeClass('closed');
             $(this).text($(this).text() == 'Close Window' ? 'Open Window' : 'Close Window'); 
           } else {                
             $("#open_sidebar").toggleClass("closed").removeClass('open');
             $(this).text($(this).text() == 'Open Window' ? 'Close Window' : 'Open Window');    
           }
        });
    });
})(jQuery);

/====================脚本到此结束 ====================/

这是 HTML：

打开窗口

点击后会发生以下情况：

关闭窗口

第二次点击：

打开窗口

【讨论】：