显示/隐藏div按钮
[英]Show/Hide div with button
问题描述
我有一个带有按钮的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 ▼</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>
在此先感谢您的帮助或建议。
4 个解决方案
解决方案1
5 2014-04-04 14:55:18
使用.toggle()代替
$(document).ready(function () {
$("#spoiler1").hide();
$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});
更新
关于使用多个按钮的想法，我想出了您应该尝试的方法，为按钮使用classes而不是IDs ，并为要切换的divs提供相同的ID 。 这可能会遇到一些设计问题，但是您可以管理，这只是前进的基本指南。
由于标记对于多个divs来说太长了，所以我只发布。
JQuery的
$(document).ready(function () {
$(".category").click(function () {
$(".show").hide();
var divToShow = $(this).text().split(" ")[0];
$("#" + divToShow).toggle('slow');
});
});
解决方案2
0 2014-04-04 14:56:05
至于多按键事件。 为按钮分配一个类别名称，以便您可以按类别进行选择。
$('button.toggle-div').click(function(){...});
至于可见性切换，有多种方法。
在
jQuery使用toggle()。 （最明显的选择，但实际上我们也可以。）使用
toggleClass()链接添加/删除具有display:nonecss规则的类。 （更灵活，您可以切换其他css样式，例如字体颜色，背景等。）使用一些双向绑定的JavaScript库，如基因敲除js或angular。 （对于小型应用程序来说可能是一个过大的杀伤力。但是，如果大规模使用，肯定会减少编码量。）
解决方案3
0 已采纳 2014-04-04 14:57:35
$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
if($("#spoiler1").is(':visible')){
$("#spoiler1").slideUp(300);
}
else
{
$("#spoiler1").slideDown(300);
}
});
});
演示：
解决方案4
0 2014-04-04 14:57:53
改用切换：
$('#button1').bind("click",function(){
$("#spoiler1").toggle("fast");
});
使用按钮切换显示/隐藏div吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.