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

Question

试了很多方法还是不行……

• 单击提交按钮和展开按钮（选项卡）以显示聊天机器人并隐藏选项卡
• 点击最小化按钮（聊天机器人）隐藏聊天机器人并显示标签

1) 添加类/删除类

default.htm

<!-- ------- 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"></div>
    </div>
    <iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>

JS

$(function(){

    $(".tab-close").click(function() {        
        $(this).closest(".my-tab").addClass("hidden");   //working
    }); 

    $(".tab-expand").click(function() {        
    var chatbot = $(this).closest(".cb-window");
    chatbot.removeClass("hidden");
    $(this).closest(".my-tab").addClass("hidden");    //working
    });

    $(".btnSubmit").click(function() {   
    var chatbot = $(this).closest(".cb-window");
        chatbot.removeClass("hidden");
        $(this).closest(".my-tab").addClass("hidden");
    });

    $(".minus").click(function() {
    var chatbot = $(this).closest(".cb-window");
        chatbot.addClass("hidden");
        $(this).closest(".my-tab").removeClass("hidden");
    });
});

---

2) .css

$(this).closest(".cb-window").css("visibility", "visible");

有人可以告诉我怎么做吗？谢谢你。 或使用jquery的任何其他方式？ .show/.hide , .toggle?

Answer 1

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

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

当您在btnSubmit 点击事件上说closest 时，.cb-window 从来都不是它的祖先，所以$(this).closest('.cb-window') 基本上会失败。您需要遍历btnSubmit 的父级，该父级将是sibling 的.cb-window，然后您可以轻松获取该元素。以下是如何实现它。另外，你不需要多个$(function(){，它相当于$(document).ready，一个就足够了。

$(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>

Answer 2

当我们点击或操作一个元素时，我们可以添加或删除类，你可以这样尝试。

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

Answer 3

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

$(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>