Javascript 如何正确显示/隐藏消息对话框_Javascript_Jquery_Css

Javascript 如何正确显示/隐藏消息对话框

javascript jquery css

Javascript 如何正确显示/隐藏消息对话框,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试制作一个聊天应用程序，在打开一个对话框消息时，我可以正确显示/隐藏对话框，如下图所示，-但当我尝试打开许多对话框时，我遇到了这个问题，如在img中，聊天对话框的标题没有显示在底部多谢各位 <script> /*clicking on the head of msg_box for hide/show the content of the msg_box*/ $(document).on('click', '.show_hide_c

我正在尝试制作一个聊天应用程序，在打开一个对话框消息时，我可以正确显示/隐藏对话框，如下图所示，-但当我尝试打开许多对话框时，我遇到了这个问题，如在img中，聊天对话框的标题没有显示在底部多谢各位

<script>
    /*clicking on the head of msg_box for hide/show the content of the 
      msg_box*/
          $(document).on('click', '.show_hide_click', function()
          {
            var to_user_id = $(this).data('touserid');
            $('.show_hide_msg[data-touserid="'+to_user_id+'"]').slideToggle();
          });
</script>
<html>
    <ul id="list">
    <li class="mx-1 mt-3 msg_content " data-touserid="+to_user_id+" >
        <div class="head bg-success text-center  border-bottom border-secondary">
            <div class="row">
                <div class="col-md-6 bg-da py-1 show_hide_click" data-touserid="+to_user_id+">
                    <img src="avatar-teacher.png" alt="aa" style="height: 5.5vmi" class="mr-2">
                    <label for="">+to_user_name+</label>
                </div>

                <div class="col-md-6 text-right">
                    <a href="#">
                        <i class="fas fa-times-circle fa-lg text-white fa-sm m-2 pt-2 hide_msg_content" data-touserid="+to_user_id+"></i>
                    </a>
                </div>

            </div>                                                              
        </div>
        <div class="show_hide_msg" data-touserid="+to_user_id+">
            <div class="chat_history " id="chat_history_+to_user_id+" data-touserid="+to_user_id+">
                fetch_user_chat_history(to_user_id
            </div>
            <div class="body">

                            <div class="form-group">
                            <textarea placeholder="Write msg..." style="overflow:hidderesize: none" name="chat_message_+to_user_id+" id="chat_message_+to_user_id+" class="form-control chat_message"></textarea>
                        </div>
                        <div class="text-right form-group">
                            <a href="#" id="+to_user_id+" class=" send_chat">
                                <i class="m-2 fas fa-paper-plane"></i>  
                            </a>
                        </div>

            </div>
        </div>

    </li>
</ul>
</html>

您有两个选择：

1直接编辑CSS属性：

function toggleVisibility(elementID, visible) {
  if (visible) {
    $(elementID).attr("style", "display:block");
  } else {
    $(elementID).attr("style", "display:none");
  }
}

2使用jQuery的toggleClass，它将根据类列表中是否存在类，从元素的类列表中添加/删除类，这样您就可以在不必担心状态的情况下交换.visible和.hidden类

function toggleBtn(elementID){
  $(elementID).toggleClass('visible').toggleClass('hidden');
}

欢迎来到堆栈溢出。请始终发布您在问题中使用的相关HTML、CSS和JavaScript。如果您对代码有问题，则需要将代码包含在问题中。代码的图片没有帮助。发布代码本身。在问题中包含代码，而不是注释。问题左下角有一个编辑按钮。请不要将代码添加为注释。编辑您的问题并将其添加到那里。编辑问题时，请花点时间检查工具栏。这里有一个创建代码段的按钮。这是您可以输入代码以便执行的地方。抱歉，我是新手，我现在正确地输入了代码谢谢您的回答，但它会给出相同的结果，我的问题是当我尝试打开许多Chat对话框时，与聊天对话框标题上方未显示在底部的图像一样，我建议使用两个CSS类打开并最小化标题，使用相同的CSS类打开并最小化正文，每个类应用适当的CSS样式，并使用toggleClass在两者之间进行交换。此外，您还需要一个单独的类来控制聊天窗口的并排堆叠。