jquery - 如何关闭 div

Question

我有用表单打开 div 的按钮。

点击“.fa-times”时如何关闭该框？

index.php

<script>
$(document).ready(function(){
    $('.st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300 } );
});
</script>

HTML 文件：

<div class="st-actionContainer left-bottom">
    <div class="st-panel">
        <div class="st-panel-header"><i class="fa fa-bars" aria-hidden="true"></i> Contact  <a href="#"><i class="fa fa-times pull-right" aria-hidden="true"></i></a></div>
        <div class="st-panel-contents">
            Some text
        </div>

    </div>
    <div class="st-btn-container left-bottom">
        <div class="st-button-main"><i class="fa fa-bars" aria-hidden="true"></i> </div>
    </div>
</div>  

这是 jquery 脚本： https://github.com/dlenhart/st-action-panel-git/blob/master/js/st.action-panel.js

Answer 1

1.要删除 div 可以使用.remove()，但以后无法访问 div。

$("button").click(function(){
  $("#div").remove();
});

div{
  background-color:black;
  width:300px;
  height:200px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>
<button >click me</button>

2. 还有其他删除 div 的方法，使用 .hide() 它将隐藏 div，这就是您以后可以访问 div 的原因。

$("#hide").click(function(){
  $("#div").hide();
});
$("#show").click(function(){
  $("#div").show();
});

div{
  background-color:black;
  width:300px;
  height:200px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>
<button id="hide">click me to hide</button>
<button id="show">click me to show</button>

3. 这可以通过.toggle 函数来完成。它将隐藏和显示 div。

$("button").click(function(){
  $("#div").toggle();
});

div{
  background-color:black;
  width:300px;
  height:200px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>
<button >click me</button>