Question

我有一个从底部滑出的小面板。它有一个V形图标。我正在构建一个jquery片段，将它打开（打开它）并关闭它，但它必须将V形图从上到下改变。

打开和关闭正在工作，并且Vvre打开时会发生变化但是当它关闭时它不会重置回V形状。我的条件陈述中出了点问题。

这是我到目前为止所拥有的

<script>
$("#openchat").click(function(){
    $("#floatingmenu").toggleClass("chatbox-open");

    if ($(this).hasClass("chatbox-open")) {
        $(this).removeClass("fa-chevron-up");
        $(this).addClass("fa-chevron-down");
    } else if (!$(this).hasClass("chatbox-open")) {
        $(this).addClass("fa-chevron-down");
        $(this).removeClass("fa-chevron-up");    
    }        
});
</script>

我附加了CODEPEN DEMO

顺便说一句，我的.chatbox-open类打开它并关闭它。其他类是图标的简单字体 - 真棒类

请帮助

Answer 1

您的代码只会进入else，因为#openchat从未将其类切换到其他地方。

您可以更改为此

$("#openchat").click(function () {
    $("#floatingmenu").toggleClass("chatbox-open");
    $(this).toggleClass("fa-chevron-up fa-chevron-down")
});

实例：http://codepen.io/anon/pen/myBeEb

Answer 2

实际上你不需要检查，因为如果$(this).hasClass("chatbox-open")为false，它将直接转到else并执行它。

<script>
$("#openchat").click(function(){
    $("#floatingmenu").toggleClass("chatbox-open");

    if ( $(this).hasClass("chatbox-open") ){

        $(this).removeClass("fa-chevron-up");
        $(this).addClass("fa-chevron-down");

    } else {
            $(this).addClass("fa-chevron-down");
            $(this).removeClass("fa-chevron-up");    
    }        
});
</script>

只需从其他地方移除if (!$(this).hasClass("chatbox-open"))

即可

检查hasClass是否添加类

2 个答案: