gpt4 book ai didi

javascript - 单击 div 1,打开新内容。单击 div 2 打开 div1 的内容

转载 作者:行者123 更新时间:2023-11-28 18:13:25 27 4
gpt4 key购买 nike

我有很多装有不同内容的盒子。

如果单击第一个框,您可以看到一个包含更多详细信息的弹出框。如果单击第二个、第三个等框,您必须查看这些框的详细信息。

我的问题:如果我点击框号。 2 我看到了盒子号的详细信息。 1.

HTML:

<div id="fade" class="black_overlay"></div>

<div id="openDiv" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
<a href="#" class="openDiv" id="closeDiv">Close</a>
</div>
q</div>

<div id="openDiv" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">

<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
<a href="#" class="openDiv" id="closeDiv">Close</a>
</div>
</div>

Jquery:

function clickCase() {

$(".openDiv").click(function() {
$("#light").toggle();
$("#fade").toggle();

});
$("#closeDiv").click(function() {

$("#light").toggle();
$("#fade").toggle();
});
}

以下是完整代码:http://jsfiddle.net/jvynbq1u/

最佳答案

只需更新功能

function clickCase() {
$(".openDiv").click(function() {
$(this).find("#light").toggle();
$("#fade").toggle();
});

$(".closeDiv").click(function() {
$(this).find("#light").toggle();
$("#fade").toggle();
}); }

并更改 HTML 中的类以关闭

<div id="openDiv" class="openDiv case1 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
</div>
<div class="col-xs-12 content">
<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 1! More Stuff. Say Hello!</p>
<a href="#" class="openDiv closeDiv" id="">Close</a>
</div>
</div>

<div id="openDiv" class="openDiv case2 col-xs-12">
<div class="col-xs-12">
<img src="https://placehold.it/100x50" alt="#" />
</div>
<div class="col-xs-12 content">

<p>Some Stuff here</p>
</div>
<div id="light" class="white_content">
<p>Case 2! More Stuff. Say Hello!</p>
<a href="#" class="openDiv closeDiv" id="closeDiv">Close</a>
</div>
</div>

并且不要忘记将“closeDiv”添加到具有此 ID 的元素类中。它在 JSFiddle 上为我工作。 <强> http://jsfiddle.net/jvynbq1u/9/

当你想在多个元素上添加一个函数时,也请使用类,而不是 id。一个特定 ID 只能用于页面上的一个元素。

关于javascript - 单击 div 1,打开新内容。单击 div 2 打开 div1 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41164930/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com