如何「用切換按鈕顯示和隱藏內容」適用於多個div？

-2

我正在嘗試爲多個div創建切換按鈕。我找到了一個很好的教程，分享下面的代碼：如何「用切換按鈕顯示和隱藏內容」適用於多個div？

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>'); 
    $('a#toggle-example2').click(function() { 
     $('.example2').slideToggle(1000); 
     return false; 
    }); 
}); 
</script>

如何更改代碼的多格類，像.example2，.example3，....

這裏是教程：http://rpardz.com/blog/show-hide-content-jquery-tutorial/

來源

2013-03-04 akr

我想創建這將有選項切換的div（顯示/隱藏）多個表。如果js被禁用，則所有表格都將可見。如教程中所示（上面的鏈接）。該教程是關於顯示隱藏一個div只，但我想這個多個div – akr 2013-03-04 14:51:12

是的，但你有什麼試過？ [問] – Doorknob 2013-03-04 15:20:35

如果你已經知道了DIV類，那麼你可以寫下面的代碼到一個單獨的功能：

function applytoggle(divclass) { 
    var linkId = 'toggle-'+divclass; 
    $('.'+divclass).hide(); 
    $('.'+divclass).before('<a href="#" id="'+linkId+'" class="button">Open/Close</a>'); 
    $('a#toggle-' + divclass).live('click', function() { 
     $('.'+divclass).slideToggle(1000); 
     return false; 
    }); 
}

，那麼你可以調用註冊切換爲所有事件divs as

applytoggle（'example1'）; applytoggle（'example2'）;

編輯：小提琴http://jsfiddle.net/QLGwr/6/

來源

2013-03-04 13:25:59 Aravind

請你詳細說明一下吧！是的，我知道div類 – akr 2013-03-04 14:40:20

我已經拿出你給的代碼到一個函數接受一個div的類名稱。然後它應用與您在特定元素上提到的相同的邏輯。由於我創建了一個函數，它可以應用於'n'個div標籤。我用'live'，因爲錨標記是動態創建的！ – Aravind 2013-03-04 15:48:37

我試過http://jsfiddle.net/QLGwr/1/但它不起作用。 – akr 2013-03-05 05:37:57

如何「用切換按鈕顯示和隱藏內容」適用於多個div？

回答

相關問題