如何显示/隐藏消息对话框 corecrtly答案

【问题标题】：how to show/hide msg dialog corecrtly如何显示/隐藏消息对话框 corecrtly
【发布时间】：2019-05-07 15:01:01
【问题描述】：

我正在尝试制作一个聊天应用程序，在只打开一个对话框消息时，我可以正确显示/隐藏对话框，如下图，befor hide chat msg content - hide msg dialog content 但是当我尝试打开很多对话框我有这个问题（就像在img中一样）聊天对话框的标题没有显示在底部multiple chat dialg 谢谢。

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

【问题讨论】：

欢迎来到 Stack Overflow。请始终在问题中发布您正在使用的相关 HTML、CSS 和 JavaScript。
如果您遇到代码问题，代码需要包含在问题本身中。代码图片没有帮助。自行发布代码。
在问题中包含代码，而不是 cmets。问题的左下角有一个编辑按钮。
请不要将您的代码添加为评论。编辑您的问题并将其添加到那里。在编辑问题时花点时间检查工具栏。那里有一个按钮可以创建“sn-p”。您可以在此处输入代码以便执行它。
对不起，我是新人，我现在把代码写对了

标签： javascript jquery css

【解决方案1】：

你有两个选择：

1) 直接编辑 CSS 属性：

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

2) 使用 jQuery 的 toggleClass()，它将在元素的 classList 中添加/删除一个类（取决于它是否存在于 classList 中），因此您可以拥有 .visible 和 @ 987654324@ 类被交换而无需担心状态。

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

【讨论】：

谢谢你的回答，但它给出了相同的结果，我的问题是当我尝试打开多聊天对话框时，如上图
底部不显示聊天对话框的标题
我建议为标题设置两个 CSS 类（打开和最小化），对正文使用相同的类（打开和最小化），每个类都应用适当的 CSS 样式，并使用 toggleClass() 来在两者之间交换。
您还需要一个单独的类来控制聊天窗口的并排堆叠。