Question

我正在尝试创建一个聊天应用程序，在一个对话框味精的打开中，我可以正确显示/隐藏该对话框，如下图所示，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>

Answer 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中），因此您可以使用{{1 }}和.visible类被交换，而您不必担心状态。

.hidden

如何显示/隐藏味精对话框

1 个答案: