如何让div关闭并隐藏在div内点击关闭？

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

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

请忽略说语法错误的行。该代码仍然有效，我只是忘了上传一个文件，与我的问题不相关的东西在页面上。

谢谢！

来源

2012-09-11 Julie S

请在问题相关的代码。你也可能想创建一个小提琴，因为那些人更容易分析代码。 –

请问this是否覆盖您的用例？

摘录：

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

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

来源

2012-09-11 01:49:28 pdoherty926

完美！谢谢！ –

给所有<div>以及指示他们组合在一起的一类（仅一次一个开放的），然后链接点击，隐藏之前与该类每个元素表示一方为你点击的链接。
如果您想将其与切换组合在一起，请在将它们全部隐藏之前获取切换状态，以便在打开它时关闭它。

来源

2012-09-11 01:30:27

这里我有codebins做了完整的垃圾桶，请检查一次演示链接。

演示：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

来源

2012-09-11 11:04:48 gaurang171

如何让div关闭并隐藏在div内点击关闭？

回答

相关问题