多次更改CSS样式

Question

我正在聊天，我对jQuery部分有异议。

<ul id="buttomIcon">
    <li id="span1"><span class="glyphicon glyphicon-send iconCom"></span></li>
</ul>

所以，当我点击图标时，它会打开聊天窗口。

<div class="container closeAll">
    <div class="row display chatBox drag ">
        <div class="col-md-2 col-md-offset-9 ">
            <div class="dragIt ">
                <button class="close closeChat" data-dismiss="drag"><span class="glyphicon glyphicon-remove closeChat"></span></button>
            </div>
            <iframe class=""></iframe>
            <textarea class="" id="chat"></textarea>
        </div>
    </div>
</div>  

当我点击图标-删除它，关闭聊天窗口。

但问题是，当我想再次尝试并打开它，它不再工作了。这是我的jQuery：

$("#span1 span").click(function () {
    $(".chatBox").toggle();
});

$(".closeChat").click(function () {
    $(".closeAll").hide();
});

Answer 1

尝试：

$("#span1 span").click(function () {
            $(".chatBox").toggle();
            $(".closeAll").show();
        });

Answer 2

事实上，它是有效的，但是对于but，我想说的是：

$("#span1 span").click(function () {
    $(".chatBox").toggle();
});
$(".closeChat").click(function () {
    $(".closeAll").hide();
});

检查一下你所做的事情：

1. 您在$("#span1 span")上有一个单击事件，并且正在切换$(".chatBox")。
2. $(".closeChat")上还有另一个单击事件，这隐藏了具有$(".chatBox")的父元素$(".closeAll")。

所以请使用这个：

$(".chatBox").toggle();  
$(".closeAll").show();  

Answer 3

在其他解决方案中，如果隐藏.closeAll，则需要在.chatBox上单击两次才能重新打开chatBox。以下是解决方案

尝试如下：

$("#span1 span").click(function () {
     $(".chatBox").toggle();
});

$(".closeChat").click(function () {
     $(".chatBox").toggle();
});