創建通用擾流箱

$(document).ready(function(){ 
    $("#spoil").click(function(){ 
    $(this).toggle(); 
    }); 
});

我正在使用Jquery創建擾流板或下拉框，因此您單擊該按鈕，然後信息消失，然後再次單擊它時它會返回。我正在計劃有很多這樣的產品，並且想知道如何改變我的代碼，這樣它就可以與所有不需要每次更改js的擾流盒一起工作。謝謝創建通用擾流箱

我只是在切換框的內容不是它自己的按鈕。

來源

2013-08-21 reidjako

你真的想多箱或只是需要擾流板的內容進行更改？即：數據驅動的解決方案是否適合您？ – dc5

我想切換div的內容而不是按鈕。 – reidjako

由於你解釋得非常糟糕，你的需求會變得非常混亂。每個人都在猜測你實際需要什麼。我認爲是時候展示一些您需要的HTML示例並澄清問題。 –

你的意思

Live Demo

$(function() { 
    $(".toggle").on("click",function() { 
     $(".toggled").toggle().removeClass("toggled"); 
     $(this).next(".spoiler").toggle().addClass("toggled"); 
    }) 
});

使用鏈接我想補充的preventDefault：

$(function() { 
    $(".toggle").on("click",function(e) { 
     e.preventDefault(); // do not follow the link 
     $(".toggled").toggle().removeClass("toggled"); 
     $(this).next(".spoiler").toggle().addClass("toggled"); 
    }) 
});

來源

2013-08-21 06:01:30 mplungjan

+1閱讀心靈。 – dc5

這聽起來像你只需要使用類，而不是一個ID。使用ID通常不是必需的或推薦的。

$(document).ready(function(){ 
    $(".spoil").click(function(){ //bind a click function to all elements with class "spoil" 
    $(this).toggle(); 
    }); 
});

來源

2013-08-21 05:39:03 m59

謝謝，但我怎樣才能讓它，所以當你點擊按鈕或.spoil，除了按鈕，它的所有關閉。所以你仍然可以切換它。如果這是有道理的 – reidjako

我不理想你的意思是「所有」。如果您需要更深入的幫助，您應該對jsbin.com進行測試。我可以看看它並告訴你如何使它工作。 – m59

如何點擊已切換的內容？ – mplungjan

使用的一類，.spoil，而不是一個ID，#spoil，那麼你可以有與.spoil類的許多元素，只要你願意。

JS：

$(document).ready(function(){ 
    $(".spoil").click(function(){ 
    $(this).toggle(); 
    }); 
});

HTML：

<div class="spoil"></div> 
<div class="spoil"></div> 
<div class="spoil"></div>

來源

2013-08-21 05:39:26 stealthyninja

謝謝，但我怎麼做到這一點，當你點擊按鈕或.spoil，除了按鈕，它的所有關閉。所以你仍然可以切換它。如果這是有道理的 – reidjako

如何點擊已切換的內容？ – mplungjan

@reidjako - 當然，要做到這一點，你可以更新你的JS和HTML如下所示：http://jsfiddle.net/LpYvb/ – stealthyninja

創建通用擾流箱

回答

相關問題