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

使用jquery展开ALL / Collapse ALL

1 个答案: