显示/隐藏div按钮
[英]Show/Hide div with button
问题描述
I have aa HTML page with a button which shoes hidden content when pressed. 
我有一个带有按钮的HTML页面，该按钮在按下时会隐藏内容。 I am using jquery code which I have bundled into my HTML page. 我正在使用捆绑在HTML页面中的jquery代码。 When I press the button to show the content in the hidden div it works find, however when I press the button again to hide the content nothing happens. 当我按下按钮以显示隐藏的div中的内容时，它可以找到，但是当我再次按下按钮以隐藏内容时，什么也没有发生。 If anyone could help me that would be great. 如果有人可以帮助我，那就太好了。 Also how would I be able to target multiple buttons. 另外，我将如何定位多个按钮。 Would I just paste the same jquery code and label it '2' and then '3' and so on for example? 我是否只需粘贴相同的jquery代码并将其标记为“ 2”，然后标记为“ 3”，依此类推？ Any working examples would be great. 任何可行的例子都很好。 Here is my code: 这是我的代码：
HTML: 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>
Thanks in advance for any help or advice. 在此先感谢您的帮助或建议。
4 个解决方案
解决方案1
5 2014-04-04 14:55:18
Use .toggle() instead 使用.toggle()代替
$(document).ready(function () {
$("#spoiler1").hide();
$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});
Update 更新
And the idea about having mutiple buttons, I've come up with the approach that you should try, use classes instead of IDs for the buttons and provide the same ID to divs that you want to toggle. 关于使用多个按钮的想法，我想出了您应该尝试的方法，为按钮使用classes而不是IDs ，并为要切换的divs提供相同的ID 。 This might take some design issues but you can manage and this is just a basic guideline to move forward. 这可能会遇到一些设计问题，但是您可以管理，这只是前进的基本指南。
As Markup is too long for mutiple divs so i'm posting only. 由于标记对于多个divs来说太长了，所以我只发布。
JQuery 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
As for multiple button event. 至于多按键事件。 Assign a class name to the button so you can select by class. 为按钮分配一个类别名称，以便您可以按类别进行选择。
$('button.toggle-div').click(function(){...});
As for visibility toggle, there are a number of ways. 至于可见性切换，有多种方法。
Use
toggle()injQuery.在jQuery使用toggle()。 (the most obvious choice, but in practice we could also..)（最明显的选择，但实际上我们也可以。） Use
toggleClass()link to add/remove a class which has adisplay:nonecss rule.使用toggleClass()链接添加/删除具有display:nonecss规则的类。 (more flexible, you can toggle other css styles like the font color, background, etc.)（更灵活，您可以切换其他css样式，例如字体颜色，背景等。） Use some two-way binding JavaScript libraries like knockoutjs or angular.
使用一些双向绑定的JavaScript库，如基因敲除js或angular。 (Probably an overkill for a small application. But it will definitely reduce the amount of coding if it is a large scale.) （对于小型应用程序来说可能是一个过大的杀伤力。但是，如果大规模使用，肯定会减少编码量。）
解决方案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);
}
});
});
Demo: 演示：
解决方案4
0 2014-04-04 14:57:53
Use toggle instead: 改用切换：
$('#button1').bind("click",function(){
$("#spoiler1").toggle("fast");
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.