Toggle ExpandAll/CollapseAll

我目前使用jQuery切換顯示和隱藏之間切換。它適用於單個元素。當我嘗試做一個全部展開並全部摺疊的時候，它可以正常工作，除了一個條件外。如果任何單個元素已經展開或摺疊，它會切換它們，但不是如預期的那樣。也就是說，當我點擊展開所有展開的元素時，除了已展開的個別元素以外，所有元素都會展開，反之亦然。我如何照顧這種情況？Toggle ExpandAll/CollapseAll

<script type="text/javascript"> 
    $(".toggle_container").hide(); 
    $("div.description-content-title").toggle(function() { 
     $(this).addClass("collArrow"); 
    }, function() { 
     $(this).removeClass("collArrow"); 
    }); 
    $("div.description-content-title").click(function() { 
     $(this).next(".toggle_container").slideToggle("slow"); 
    }); 

    $(".close-all").toggle(function() { 
     $(".close-all a").text("[Expand All]"); 
    }, function() { 
     $(".close-all a").text("[Close All]"); 
    }); 

    $(".close-all").click(function() { 
     $(".toggle_container").slideToggle("slow"); 
    }); 
</script>

HTML：

<div class="news-top-head"> 
    <div class="time-head sortable" data-sort-column="ContentDate"> 
     <span style="float: left; width: auto;">Time</span> <span class="sort-order-hidden ui-icon" /> 
    </div> 
    <div class="description-head sortable" data-sort-column="ContentTitle"> 
     <span style="float: left; width: auto;">Description</span> <span class="sort-order-hidden ui-icon" /> 
    </div> 
    <div class="close-all"> 
     <a href="#">close all</a> 
    </div> 
    <div class="clear"> 
    </div> 
</div> 

<div class="description-content"> 
    <div class="description-content-title expArrow"><%=breakingNews[index].ContentTitle%></div> 
     <div class="toggle_container"> 
      <p ><%=breakingNews[index].ContentDescription%></p> 
     </div> 
    </div> 
</div>

如果您有任何代碼樣本，將是很有益的。

來源

2011-07-22 Pawan

，除非你添加一個額外的類的東西找出哪一樣與衆不同的，而忽略它不能在這種情況下，使用切換爲您近距離的所有按鈕。使這項工作最簡單的方法是使用slideDown(）和slideUp()而不是slideToggle()。刪除以下代碼：

$(".close-all").click(function() { 
    $(".toggle_container").slideToggle("slow"); 
});

而變化：

$(".close-all").toggle(function() { 
    $(".close-all a").text("[Expand All]"); 
}, function() { 
    $(".close-all a").text("[Close All]"); 

});

要：

$(".close-all").toggle(function() { 
    $(".close-all a").text("[Expand All]"); 
    $(".toggle_container").slideDown("slow"); 
}, function() { 
    $(".close-all a").text("[Close All]"); 
    $(".toggle_container").slideUp("slow"); 
});

來源

2011-07-22 03:29:08 Paulpro

Paul：當所有的元素被展開並且文本關閉時ALL和當我點擊關閉所有的選項卡時它不關閉元素。只有文本切換後才能展開全部。當所有文本都關閉並展開所有內容時，它會正確地展開所有元素並切換文本以關閉所有元素。 – Pawan

@Pawan，我更新了我的帖子。它是由click（）處理程序之前觸發的toggle（）處理程序引發的。我現在將slideUp和slideDown的邏輯放入toggle（）處理程序中。 – Paulpro

感謝保羅，做了伎倆 – Pawan

看看這個代碼，如果有用，

jQuery(document).ready(function($) { 
    $("#toggle_container").hide(); 
}); 
function showSlidingDiv(){ 
    $("#toggle_container").animate({"height": "toggle"}, { duration: 500 }); 
}

也可以指Show-Hide div content using jQuery如果需要..

來源

2011-07-22 03:32:41 Chandresh

Toggle ExpandAll/CollapseAll

回答

相關問題