1

ASP .NET ページにリピーター コントロールが含まれています。気になるHTMLはこちら。ここにはいくつかのカスタム コントロールがありますが、それは私の質問にとって重要ではないと思います。

<table style="border: 0px;" cellpadding="0" cellspacing="0">
   <tr>
      <td style="width: 150px;">
     <b>Topic</b>
      </td>
      <td style="width: 250px; padding-right:10px;">
     <b>Score</b>
      </td>
   </tr>
   <asp:Repeater ID="_prvCtlRepeaterSurveyTopics" runat="server">
      <ItemTemplate>
    <tr>
      <td style="width: 35%;">
         <div id="ClickToExplandDiv">
        <img id="_prvCtlImagePlusMinus" runat="server" alt="Expand/Collapse" src="" class="PlusMinus" />
        <customtagprefix:ctlEncodedLabel id="_prvCtlEncodedLabelTopicText" runat="server" CssClass="ECLink" />
        </div>
      </td>
      <td style="width: 30%;">
         <img id="_prvCtlImageTopic" runat="server" src="" alt="Score" />
      </td>
      <td style="width: 35%; white-space: nowrap;">
         <customtagprefix:ctlEncodedLabel id="_prvCtlLabelTopic" runat="server" />
      </td>
    </tr>
    <tr>
      <td style="padding: 3px 15px; width: 400px;" colspan="3">
        <div id="ExplandODiv">
        <customtagprefix:ctlRoundedGrayHeader id="_prvCtlRoundedGrayHeaderCF" runat="server" />
        <customtagprefix:ctlSummeryResultsList ID="_prvCtlSummaryResultsList" runat="server" />
        <customtagprefix:ctlRoundedGrayFooter id="_prvCtlRoundedGrayFooterCF" runat="server"/>
        </div>
      </td>
    </tr>                           
      </ItemTemplate>
   </asp:Repeater>
</table>

このコードで作成された DIV をクリックできるようにしたい:

<div id="ClickToExplandDiv">
   <img id="_prvCtlImagePlusMinus" runat="server" alt="Expand/Collapse" src="" class="PlusMinus" />
   <customtagprefix:ctlEncodedLabel id="_prvCtlEncodedLabelTopicText" runat="server" CssClass="ECLink" />
</div>

このセグメントに表示される情報を展開または折りたたみます。

  <td style="padding: 3px 15px; width: 400px;" colspan="3">
    <div id="ExplandODiv">
    <ayco:ctlRoundedGrayHeader id="_prvCtlRoundedGrayHeaderCF" runat="server" />
    <ayco:ctlSummeryResultsList ID="_prvCtlSummaryResultsList" runat="server" />
    <ayco:ctlRoundedGrayFooter id="_prvCtlRoundedGrayFooterCF" runat="server"/>
    </div>
  </td>

私はこのためのJQueryに途方に暮れています。現在、最初に非表示にしたいすべての DIV を正常に非表示にしてから、最初の非表示の DIV だけを開く次のようなものがあります。

<script type="text/javascript">
    var isInitialized = false;
    $(document).ready(function() {

        if (!isInitialized) {
            $('[id=ExplandODiv]').hide();
            isInitialized = true;
        }

        $('div[id=ClickToExplandDiv]').click(function() {
            $('#ExplandODiv:first-child').toggle();
        });
    });   
</script>

これを回避するために考えられる 1 つの方法は、ItemDatabound(...)イベントでそれらを実行するときに、要素に「偽のクラス」を割り当てることです。ただし、クリックしたリンクの下で適切な DIV を選択する CSS セレクターを使用できるようにする必要があると考えています。「this」オブジェクトの派生物かもしれませんが、これを理解するのに苦労しています。

これについてあなたが提供できる助けをいただければ幸いです。ありがとう。

4

2 に答える 2

2

id='ExplandODiv'テーブルでand をid='ClickToExplandDiv'複数回使用しています。これらをクラスに変更する必要があります。

$(function(){
    $(".ExplandODiv").hide();    
    $(".ClickToExplandDiv").click(function(){
        $(this).closest("tr").find(".ExplandODiv").toggle();
    });
});

また、if (!isInitialized)チェックは不要です。これで問題が解決する場合は、おそらくどこかで何か間違ったことをしている可能性があります。

于 2012-04-20T15:04:41.473 に答える
1

これをスクリプト領域で使用すると、機能するはずです。そして、最初の答えが指摘したように、idの代わりにクラスを使用する必要があります。あなたがしなければならないのは、slideToggleアニメーション用のJqueryとJqueryUIを含めることだけです。

var isInitialized = false;

$('.ClickToExpandDiv').click(function(e) {
    e.preventDefault();
    $(this).parent().parent().next().find('.ExpandODiv').slideToggle();
    return false;
});

$(document).ready(function() {

    if (!isInitialized) {
        $('.ExpandODiv').hide();
        isInitialized = true;
    }

});

ここでテストを確認してくださいhttp://jsfiddle.net/vecalciskay/54HxU/5/

それが役に立てば幸い。

于 2012-04-20T20:40:11.733 に答える