顯示/隱藏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.