使用jquery展开所有/折叠所有使用jquery的

Question

当我的页面加载所有我的div时默认展开。当我点击顶部的全部折叠按钮时，它在第一次点击时不会折叠。在我第二次点击时，它崩溃了。我已经粘贴下面的代码。你能告诉我我做错了什么吗？

<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="#">Collapse All</a></div> 
    <div class="clear"> 
    </div> 
</div> 
<%var breakingNews = Model; var count = 0; %> 
<% for (int index = 0; index < breakingNews.Count; index++) { %> 
    <% if (breakingNews[index].ContentType == "Breaking News") 
    { 
     count++; %> 
     <div class="content"> 
     <div class="time-content"> 
      <p> 
       <% 
        var originalDateTime = breakingNews[index].ContentDate.ToString(); 
        DateTime dt = Convert.ToDateTime(originalDateTime); 
        var date = dt.Date.ToShortDateString(); 
        var time = dt.ToShortTimeString(); 
        StringBuilder sb = new StringBuilder(); 
        sb.Append("<span class='news-item-date'>"); 
        sb.Append(date); 
        sb.Append("</span>"); 
        sb.Append("<br />"); 
        sb.Append("<span class='news-item-time'>"); 
        sb.Append(time); 
        sb.Append("</span>"); 
       %> 
       <%=sb.ToString() %> 
      </p> 
     </div> 
     <div class="description-content"> 
      <div class="description-content-title collArrow"><%=breakingNews[index].ContentTitle%></div> 
      <div class="toggle_container"> 
       <p><%=breakingNews[index].ContentDescription%></p> 
      </div> 
     </div> 
    </div> 
    <%} %> 
<% } %> 
<% if (count == 0) 
     {%> 
    <div> 
     <p style="text-align:center;">There is no Breaking News at this time. <br /> 
      <a href="<%=Url.Content("~/LatestNews#CurrentIncidents")%>">Click here</a> for a list of current incidents, construction, & events. 
     </p> 
    </div> 
    <% } %> 

这里是JavaScript

$("div.content:even").addClass("news-content-wrapper clearfix"); 
$("div.content:odd").addClass("news-content-wrapper grey clearfix"); 

$('.description-content-title').click(function() { 
    var q = $(this).closest('.item'); 
    $(this).toggleClass("expArrow collArrow").next().toggle(); 
    q.find('.close-all a').toggleClass("expArrow collArrow", q.find('.toggle_container:hidden').length > 0); 
    return false; 
}); 


$(".close-all").toggle(function() { 
    $(".close-all a").text("Collapse All"); 
    $(".toggle_container").slideDown("slow"); 
    $("div.description-content-title").removeClass("expArrow"); 
    $("div.description-content-title").addClass("collArrow"); 

}, function() { 
    $(".close-all a").text("Expand All"); 
    $(".toggle_container").slideUp("slow"); 
    $("div.description-content-title").removeClass("collArrow"); 
    $("div.description-content-title").addClass("expArrow"); 

    }); 

Answer 1

尝试包装你的 “关闭所有” 功能的文档内准备好，像这样：

$(document).ready(function() { 
    $(".close-all").toggle(function() { 
     $(".close-all a").text("Collapse All"); 
     $(".toggle_container").slideDown("slow"); 
     $("div.description-content-title").removeClass("expArrow"); 
     $("div.description-content-title").addClass("collArrow"); 

    }, function() { 
     $(".close-all a").text("Expand All"); 
     $(".toggle_container").slideUp("slow"); 
     $("div.description-content-title").removeClass("collArrow"); 
     $("div.description-content-title").addClass("expArrow"); 
    }); 
});