javascript - 如果另一个 div 打开如何隐藏 div 使用 javascript

Question

我有这样的 div 使用 javascript :

<script>
$(document).ready(function(){
    $("#btnmsg-1").click(function(){
        $(".msgid-1").show();
    });
    $("#btnmsg-2").click(function(){
        $(".msgid-2").show();
    });
    $("#btnmsg-3").click(function(){
        $(".msgid-3").show();
    });
    $("#btnmsg-4").click(function(){
        $(".msgid-4").show();
    });
});
</script>

<div>NAME : ABCDEF <button id="btnmsg-1">message</button></div>
    <div class="msgid-1" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : GHIJKL <button id="btnmsg-2">message</button></div>
    <div class="msgid-2" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : MNOPQR <button id="btnmsg-3">message</button></div>
    <div class="msgid-3" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>
<div>NAME : STUVWX <button id="btnmsg-4">message</button></div>
    <div class="msgid-4" style="display:none;"><textarea></textarea><input type="submit" name="btnsend" value="Send"></div>

如果我点击按钮 id="btnmsg-1"然后 div class="msgid-1"显示，然后我点击按钮 id="btnmsg-3"然后 div class="msgid-3"显示但 div 类="msgid-1"不隐藏或关闭，我的问题是如果另一个 div 打开，如何隐藏 div？

Answer 1

您可以使用元素的相关定位以及类将它们分组以显示/隐藏，而不是为每个元素使用单独的处理程序

即，向所有按钮添加类似 btnmsg 的类，向所有必须显示/隐藏的 div 添加 msgedit。现在向 .btnmsg 元素注册一个点击处理程序，从您的标记中，要显示的 .msgedit 元素是被点击按钮的下一个同级元素，因此显示然后隐藏所有其他 .msgedit 元素。

$(document).ready(function() {
  var $edits = $('.msgedit')
  $(".btnmsg").click(function() {
    var $this = $(this).parent().next().show();
    $edits.not($this).hide()
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>NAME : ABCDEF
  <button class="btnmsg" id="btnmsg-1">message</button>
</div>
<div class="msgid-1 msgedit" style="display:none;">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : GHIJKL
  <button class="btnmsg" id="btnmsg-2">message</button>
</div>
<div class="msgid-2 msgedit" style="display:none;">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : MNOPQR
  <button class="btnmsg" id="btnmsg-3">message</button>
</div>
<div class="msgid-3 msgedit" style="display:none;">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send" />
</div>
<div>NAME : STUVWX
  <button class="btnmsg" id="btnmsg-4">message</button>
</div>
<div class="msgid-4 msgedit" style="display:none;">
  <textarea></textarea>
  <input type="submit" name="btnsend" value="Send" />
</div>