Блог

Когда моя страница загружается, все мои 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, amp; 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");

    });
  

Попробуйте обернуть вашу функцию «закрыть все» внутри готового документа следующим образом:

 $(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");
    });
});