如何使 div 关闭并在 div 内单击关闭时隐藏？答案

【问题标题】：How do I make divs that close and hide on click close from within the div?如何使 div 关闭并在 div 内单击关闭时隐藏？
【发布时间】：2012-09-11 01:20:01
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

请在问题中包含相关代码。您可能还想创建一个小提琴，因为它们更容易让人们分析代码。

标签： javascript jquery css html show-hide

【解决方案1】：

this 是否涵盖您的用例？

摘录：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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

【讨论】：