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，无论我单击哪个展开链接 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>

我认为解决此问题的一种方法是在ItemDatabound(...)事件中运行元素时为元素分配一个“虚假类”。但是，我认为我应该能够使用某种 CSS 选择器来在我单击的链接下选择适当的 DIV。也许是“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 回答