Question

我正在执行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链接的颜色将为红色，再次点击{{1} }链接然后它将被关闭，链接的颜色将为蓝色。

SlideToggle工作得很好，但链接的颜色无法正常工作。我不想放：可见条件，因为我知道在jquery中有一个函数做同样的事情，切换你的div同时将切换主元素的类或css，但是那个确切的函数以及如何使用它。我用Google搜索但没有得到任何东西。

任何人都可以建议我解决这个切换问题的最短路径。

Answer 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; }

Answer 2

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

将第二行更改为：

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

你也可以使用toggleClass()方法，但如果我是诚实的话，你提出问题的方式有点令人困惑。

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

2 个答案: