有沒有辦法使用只有類而不是ID的基於jQuery的顯示/隱藏許多實例(切換鏈接後面跟着帶有隱藏內容的容器;根據狀態切換文本更改)?我還沒有在任何地方找到合理的文檔記錄和功能性示例。感謝您的幫助! --cgSImple基於類的jQuery顯示/隱藏多個獨立實例?
0
A
回答
1
喜歡的東西:
<div class="toggleset">
<a class="toggler" href="#">Hide</a>
<div class="container">
Data to show/hide
</div>
</div>
$('.toggler').click(function(evt) {
var $toggler = $(this);
var $container = $toggler.siblings('.container');
$container.toggle();
$toggler.text($container.is(':visible') ? "Hide" : "Show");
evt.preventDefault();
});
你不需要外格,如果你使用next(),而不是兄弟姐妹,但它關係腳本更緊的標記。
0
非常感謝,Rob。效果很好!我已經成功地做起來很次要類可以控制切換文本是在這兩個州是什麼:
<script type="text/javascript">
<!--
$(document).ready(function() {
$('.toggler.show').click(function(evt) {
var $toggler = $(this);
var $container = $toggler.siblings('.container');
$container.toggle();
$toggler.text($container.is(':visible') ? "Show less" : "Show more");
$(this).toggleClass('active');
})
$('.toggler.read').click(function(evt) {
var $toggler = $(this);
var $container = $toggler.siblings('.container');
$container.toggle();
$toggler.text($container.is(':visible') ? "Read less" : "... Read more");
$(this).toggleClass('active');
})
evt.preventDefault();
});
-->
</script>
我將如何利用jQuery的的「幻燈片」切換?我試圖改變
$container.toggle();
喜歡的東西
$container.slideToggle('fast');
但打破上的切換文本變化。 --cg
相關問題
- 1. 顯示隱藏立基於
- 2. jquery顯示/隱藏。一個類的多個實例
- 3. 使用jQuery與多個獨立div顯示/隱藏div
- 4. 試圖使用jQuery獨立顯示/隱藏多個列表
- 5. 根據複選框值獨立顯示/隱藏多個div類
- 6. jQuery的基於數據屬性顯示/隱藏多個元素
- 7. jQuery - 顯示和隱藏div的基於類的不同
- 8. jquery:隱藏/顯示基於變量的類名
- 9. 可以獨立顯示/隱藏。我如何隱藏節目?
- 10. 基於子nth的子類隱藏顯示在多行中
- 11. jQuery的多個顯示隱藏問題
- 12. jQuery的 - 顯示和隱藏多個div
- 13. 多次顯示/隱藏jquery
- 14. 隱藏/顯示基於選擇選項的多個文本框
- 15. jQuery隱藏並顯示多個元素
- 16. jquery顯示/隱藏多個錶行
- 17. jquery隱藏顯示多個div
- 18. 使用jquery顯示多個隱藏divs?
- 19. 的JavaScript - 隱藏/顯示基於選擇
- 20. jquery只顯示/隱藏但只有一個實例
- 21. jQuery顯示在第一個實例,而不是隱藏
- 22. 如何爲多個類顯示隱藏
- 23. 用jQuery隱藏/顯示多個div的最佳實踐
- 24. Docker,獨立多軌實例
- 25. 顯示或隱藏基於多個單選按鈕選擇
- 26. jQuery - 單獨顯示/隱藏具有相同類名的項目
- 27. 隱藏和顯示多個div並使用jQuery隱藏標題
- 28. 顯示隱藏多個塊
- 29. 多個JS顯示/隱藏
- 30. 基於dropdown顯示/隱藏部分-js
文本更改已中斷,因爲在動畫完成之前容器的可見性不是最終的。 要解決這個問題,請在執行slideToggle之前檢查$ container.is('visible')並預期狀態將發生變化。即$ container.is(':visible')== true將意味着「閱讀更多」的文本,因爲我們要隱藏容器。然後你可以使用動畫來隱藏(jQuery實現幻燈片,通過改變css屬性隨着時間的推移,但最後它會被隱藏)。 如果這個答案是正確的,你可以upvote並將其標記爲答案? Thx和祝你好運! – Rob 2010-06-29 19:31:47