如何使用 .css 添加类和添加删除类或更改属性

问题在于您达成正确element的方式以及您对jquery选项的理解closest。

根据定义 - closest() 方法返回所选元素的第一个祖先。祖先是父母，祖父母， 曾祖父母，等等。

当你在点击事件上说closest btnSubmit时，.cb-window从来都不是它的祖先，所以$(this).closest('.cb-window')基本上会失败。你需要遍历回btnSubmit的父级，他将被.cb-window sibling，然后你可以很容易地得到那个元素。以下是实现它的方法。此外，您不需要相当于$(document).ready的多个$(function(){，只有一个就足够了。

$(function() {
  $(".btnSubmit").click(function() {
    $(this).closest(".ask-button-container").siblings('.cb-window').removeClass("hidden");
    //closest ancestor would be .ask-button-container and its sibling is .cb-window
    $(this).closest(".my-tab").addClass("hidden");
    //did not find .my-tab element in your `html`
  });
  $(".minus").click(function() {
    $(this).closest('.cb-window').addClass("hidden");
    $(this).closest(".my-tab").removeClass("hidden");
  });
});

.hidden {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="ask-button-container">
  <button id="submit" class="btnSubmit">Ask</button>
</div>
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
  <div id="control-bar">
    <div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
    </div>
    <iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>

当我们单击或对元素进行操作时，我们可以添加或删除类，您可以尝试这样做。

$('#elm').hover(
   function(){ $(this).addClass('hover') },
   function(){ $(this).removeClass('hover') }
)

你没有以正确的方式定位你想要的元素..你需要使用

$(function(){
    $(".tab-close").click(function() {        
        $(this).closest(".my-tab").addClass("hidden");   //working
    }); 
    $(".tab-expand").click(function() {        
    var chatbot = $(this).closest('.my-tab').next(".cb-window");
    chatbot.removeClass("hidden");
    $(this).closest(".my-tab").addClass("hidden");    //working
    });
    $(".btnSubmit").click(function() {   
    var chatbot = $(this).closest('div').next().next(".cb-window");
        chatbot.removeClass("hidden");
        $(this).closest('div').next(".my-tab").addClass("hidden");
    });
    $(".minus").click(function() {
    var chatbot = $(this).closest(".cb-window");
        chatbot.addClass("hidden");
        chatbot.prev(".my-tab").removeClass("hidden");
    });
});

.hidden{
  display : none;
}
.minus{
  padding : 5px;
  background : red;
  color: #fff;
  text-align : center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ------- button ------- -->
<div class="ask-button-container">
    <button id="submit" class="btnSubmit">Ask</button>
</div>
<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
    <div id="tab-minimize">
        <div id="tab-label"></div>
        <div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
        <div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
    </div>
</div>
<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
    <div id="control-bar">
        <div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign">-</span></div>
    </div>
    <iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>