Question

我尝试了很多方法，但仍然没有工作......

点击提交按钮＆amp;展开按钮（选项卡）以显示聊天机器人并隐藏选项卡
单击最小化按钮（chatbot）以隐藏聊天机器人并显示选项卡

1）addClass / RemoveClass

的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() 方法返回所选元素的第一个祖先。祖先是父母，祖父母， 祖父母，等等。

当您在closest点击事件上说btnSubmit时，.cb-window从未是祖先，因此$(this).closest('.cb-window')基本上会失败。您需要遍历btnSubmit的{{1}}父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; }

Answer 2

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

＆＃13;

$(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");
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

如何添加类和addRemove类或使用.css更改属性？

3 个答案: