gpt4 book ai didi

javascript - 使用按钮显示/隐藏 div

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

我有一个 HTML 页面,其中有一个按钮,按下该按钮会隐藏内容。我正在使用已捆绑到 HTML 页面中的 jquery 代码。当我按下按钮来显示隐藏 div 中的内容时,它可以找到,但是当我再次按下按钮来隐藏内容时,什么也没有发生。如果有人能帮助我那就太好了。另外我如何能够定位多个按钮。我是否可以粘贴相同的 jquery 代码并将其标记为“2”,然后标记为“3”等等?任何可行的例子都会很棒。这是我的代码:

HTML:

<head>
<script>
$(document).ready(function() {
$("#spoiler1").hide();

$("#button1").click(function() {
$("#spoiler1").show(300);
});
});
</script>
</head>

<button id="button1">Adventurer &#x25BC;</button>

<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox" /></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
</div>

预先感谢您的任何帮助或建议。

最佳答案

使用.toggle()相反

$(document).ready(function () {
$("#spoiler1").hide();

$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});

Demo

更新

关于拥有多个按钮的想法,我想出了您应该尝试的方法,使用 classes 而不是 ID 作为按钮,并提供相同的ID 到您要切换的 div。这可能会遇到一些设计问题,但您可以管理,这只是前进的基本准则。

由于标记对于多个 div 来说太长,所以我只发布。

JQuery

$(document).ready(function () {
$(".category").click(function () {
$(".show").hide();
var divToShow = $(this).text().split(" ")[0];
$("#" + divToShow).toggle('slow');
});
});

Updated Fiddle

关于javascript - 使用按钮显示/隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22866116/

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