如何在追加函数创建后最小化单个框

how to individual box minimize after append function creation

本文关键字:最小化 单个框 创建 函数 追加      更新时间:2023-09-26

我有一些聊天框。在创建框之后。如何最小化单个框

$(document).ready(function(){
    $("a").click(function(){ 
    var name = $(this).html();
    var user ='<div id="mainchat"><button id="min"> min</button><br>'+name+'</div>';
   $("#demo1").append(user);
   return false;
    });
});
// minimize the individual box
$(document).on('click', '#min',  function(){
  $(this).find("#mainchat").toggle(700);// its not working.
    //$("#mainchat").toggle(700) applied this code,first box only was minimized.
});
#mainchat
{
  position :relative;
    float:left;
  top:10px;
  left:50px;
  margin right:10px;
  height:250px;
  width:100px;
  border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#">first</a><br>
<a href="#">second</a><br>
<a href="#">third</a>
<p id ="demo1"></p>

请帮助尽量减少单个盒子。当单击单个最小化按钮时,提前致谢

只需编辑它,因为 find 只能指向子元素:

看这里: https://jsfiddle.net/r84dw7t3/

// minimize the individual box
$(document).on('click', '#min',  function(){
  $(this).parent("#mainchat").toggle(700);
});