Jquery：在 SlideToggle 上更改父元素的文本？答案

【问题标题】：Jquery: On SlideToggle change text of parent element?Jquery：在 SlideToggle 上更改父元素的文本？
【发布时间】：2009-07-15 14:18:58
【问题描述】：

我正在按如下方式进行slideToggle：

$(document).ready(function(){       
        $("#show_morecats").click(function(){
        $("#morecats").slideToggle("slow");
        $("#show_morecats").css("background-color","#399C05");
    });
});

HTML

<a href="#" id="show_morecats">More</a>
<div id="morecats" style="display:none;">Some text</div>

现在我想当我单击More 链接时morecats div 将以幻灯片效果打开，more 链接的颜色将为红色，当再次单击more 链接时它将被关闭并链接颜色为蓝色。

SlideToggle 工作正常，但链接的颜色无法正常工作。我不想设置 :visible 条件，因为我知道 jquery 中有一个功能相同的函数，切换你的 div 并且同时切换主元素的类或 css，但是那个确切的函数是什么以及如何使用它.我用谷歌搜索了它，但没有得到任何东西。

谁能给我建议解决这个切换问题的最短方法。

【问题讨论】：

我不应该得到公认的答案吗？我在您标记为已接受的解决方案前 15 分钟提供了相同的解决方案..
@Will：是的，但第二个比你的答案更清楚，两者都有相同的东西，但@Sanders 的答案更清楚，但我觉得你应该得到 +1，所以这是我的侧面

标签： jquery html

【解决方案1】：

在打开时完成颜色更改然后在关闭时恢复为蓝色的最佳方法是使用自定义类...这样您可以切换类...

jQuery：

$(document).ready(function(){
    $('#show_morecats').bind('click', function(){
        $('#morecats').slideToggle('slow', function() { 
            $('#show_morecats').toggleClass("opened");
        });
    });
});

HTML：

<a href="#" id="show_morecats">More</a> 
<div id="morecats" style="display:none;">Some text</div>

CSS：

#show_morecats { color: blue; }
#show_morecats.opened { color: red; }

【讨论】：

【解决方案2】：

我想你的意思是你想在动画完成后改变背景颜色？这就是 slideToggle 中回调参数的用途。

将第二行改为：

$('#morecats').slideToggle('slow',
    function() { $('#show_morecats').css({ backgroundColor: '#399C05' });
});

您也可以使用toggleClass() 方法，但老实说，您提出问题的方式有点令人困惑。

【讨论】：