javascript - 如何使 div 关闭并在 div 内单击关闭时隐藏？

Question

基本上，我有代码，用户单击链接，然后出现一个 div。用户必须单击相同的链接才能使该 div 消失。我有八个 div。如何设置它以便您可以单击 div 中的另一个链接来关闭它，而不是单击您用来打开它的同一个链接？我的代码如下。

http://www.lovehatecreate.net/iqhomes/jquery-show-hide-plugin-2/index.php

请忽略说语法错误的行。该代码仍然有效，我只是忘记为页面上与我的问题无关的内容上传文件。

谢谢！

Answer 1

这是否涵盖您的用例？

摘抄：

$('.show').click(function () {
    var divId = $(this).data('divId');
    $('#' + divId).toggle();
});

$('.hide').click(function () {
    $(this).parent().hide();
});

Answer 2

给出所有<div>sa 类，表明它们将被组合在一起（一次只打开一个），然后在单击链接时，隐藏该类的每个元素，然后再显示您单击的链接的元素。
如果您想将此与切换结合使用，请在将它们全部隐藏之前获取切换状态，这样您就知道如果它处于打开状态则将其关闭。

Answer 3

在这里，我已经在 codebins 上完成了完整的 bins，请检查一次演示链接。

演示： http ://codebins.com/bin/4ldqp7c

HTML

<div id="links">
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
</div>
<div id="boxes">
  <div class="box">
    <p>
      Here is Content..!! 
    </p>
    <p>
      <a class="closelink" href="javascript:void(0);">
        Close
      </a>
    </p>
  </div>
</div>

jQuery

$(function() {
    var boxClone;

    $(".openlink").click(function() {
        //Clone Dialogbox
        boxClone = $("#boxes").find(".box:eq(0)").clone(true, true);
        var boxOffset = $("#boxes").find(".box:last").position();
        //Set Dialog Position
        if (boxOffset.top == 0) {
            boxOffset.top = 5;
        }
        if (boxOffset.left == 0) {
            boxOffset.left = 60;
        }
        $(boxClone).css('top', (boxOffset.top + 20));
        $(boxClone).css('left', (boxOffset.left + 20));
        $(boxClone).appendTo($("#boxes"));
        $(boxClone).show(500);
    });

    //Close Dialogbox
    $(".closelink").click(function() {
        $(this).closest(".box").remove();
    });

});

CSS

#links{
  float:left;
  width:50px;
  border:1px solid #92a3a7;
  padding:1px;
  background:#88ddfa;
}
#links a{
  dispslay:block;
  text-decoration:none;
  color:#3543ff;
}
#links a:hover{
  text-decoration:underline;
  color:#fd2211;
}
#boxes{
  float:left;
  margin-left:10px;
}
#boxes p{
  text-align:center;
  display:block;
  color:#ccc;
}
#boxes a.closelink{
  text-decoration:none;
  color:#ff2211;
  background:#99cd9a;
  width:40px;
  text-align:center;
  padding:3px;
  font-size:14px;
}
#boxes a.closelink:hover{
  text-decoration:underline;
  background:#a5d9a3;
  color:#2222ff;
}

.box{
  position:absolute;
  width:200px;
  height:200px;
  vertical-align:top;
  border:10px solid #888;
  background:url('http://www.lovehatecreate.net/iqhomes/jquery-show-hide-plugin-2/popupbg.png') #333;
  display:none;

}

演示： http ://codebins.com/bin/4ldqp7c