1

アコーディオンパネルを閉じるための「表示」ボタンを備えたアコーディオンがあります（jQueryツールを使用）が、状態に応じて「表示/非表示」と表示される動的テキストが必要です...

asp.NETのアコーディオンのコードは次のとおりです

<div id="accordion">
  <% foreach (var eventModel in ViewModel)
     { %>

     <% var isNewMonth = eventModel.Date.Month != previousMonth; %>

     <% if (isNewMonth && previousMonth > 0)
        { %></table></div><% } %>

     <% previousMonth = eventModel.Date.Month; %>

     <% if (isNewMonth)
        { %>
        <h2><%= string.Concat(eventModel.Date.ToString("MMMM"), " ", eventModel.Date.Year) %> <span style="float:right;"><a href="#" class="button blue small">View</a></span></h2>
        <div class="pane" style="display:block">
            <table id="listTable" width="100%" cellpadding="3" cellspacing="0" border="0"> 
            <tr align="left" valign="top"><th align="left" valign="top">Date</th><th align="left" valign="top">Event</th><th align="left" valign="top">Event Type</th></tr>
     <% } %>

            <tr align="left" valign="top"><td align="left" valign="top"><b><span id="date" style="float:left;"> <%= string.Concat(eventModel.Date.ToString("MMMM"), " ", eventModel.Date.Day, " </span><span id='day' style='float:left'>" + eventModel.Date.DayOfWeek + "</span> ")%></b></td><td align="left" valign="top" ><%= Html.ActionLink(eventModel.Name.Truncate(40), "event", "register", new { id = eventModel.Id }, null)%></td><td align="left" valign="top"><%= string.Concat(" ", eventModel.Sport)%></td></tr>

  <% } %>

  <% if (ViewModel.Count > 0)
     { %></table></div><% } %>
</div>

jQuery を使用した初期化スクリプトは次のとおりです。

 
$(関数() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: 0});
$(".small").click(関数() { moveToTop(); });

});
4

2 に答える 2

0

トグル メソッドを使用できます: http://api.jquery.com/toggle/

于 2010-06-09T13:45:21.783 に答える
0

多くのスクリプトを扱いたくない場合は、アコーディオンのアイコン オプションを使用して、表示/非表示を示す画像を表示できます。

ここを見て

http://jqueryui.com/demos/accordion/#option-icons

編集済み

選択時のタブのラベルの表示/非表示の場合

$( "#accordian" ).tabs("#accordion div.pane", 
  {tabs: 'h2', 
  effect: 'slide', 
  initialIndex: 0
  select: function(event, ui) {
     //ui.panel is the current tab I think
     //you should be able to toggle a show/hide on each tab from here
  }
}
);
于 2010-06-09T13:50:02.647 に答える