2

我有一个转发器，它直接列出了来自与我的 Outlook 绑定的应用程序的电子邮件。我需要中继器列出文件夹名称，然后列出该文件夹中的每条消息。但是，我得到的是该文件夹中的每条消息的文件夹名称都会重复。

我还尝试使用 jquery 来切换文件夹名称以显示其下方的消息，但是当我使用时style="display:none;"不显示任何消息。我不认为我尝试使用的 jquery 是正确的。它被称为jsfiddle。

任何帮助将不胜感激，因为我正在画一个空白。我已经盯着这个太久了，可能只是需要休息一下。

这是我的代码：

<script type="text/javascript">
    $(function () {
        $('a.toggler').on('click', function () {
            $('+ div', this).toggle();
        });
    });
</script>

<asp:Repeater runat="server" ID="ListServRepeater">
            <ItemTemplate>
                <div class="dataContentSection">
                    <a href="javascript:void(0);" class="folders toggler">
                        <h4>
                            <%# Eval("FolderName") %>
                        </h4>
                    </a>
                </div>
                <div class="dataContentSection">
                    <div>
                        <%# Eval("Message") %>
                    </div>
                </div>
            </ItemTemplate>
</asp:Repeater>

编辑：我嵌套了转发器，但我不能做正确的事情，因为所有文件夹名称仍然显示在每条消息中。

<div runat="server">
    <ul>
        <asp:Repeater runat="server" ID="FolderRepeater">
            <ItemTemplate>
                <li class="dataContentSection">
                    <a href="javascript:void(0);" class="folders toggler">
                        <h4>
                            <%# Eval("FolderName") %>
                        </h4>
                    </a>
                </li>
                <asp:Repeater runat="server" ID="MessagesRepeater">
                    <ItemTemplate>
                        <li class="dataContentSection" >
                            <div id="messages">
                                <%# Eval("Message") %>
                            </div>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>

更新：感谢@rs 提供文章帮助，我能够让中继器正常工作。如果您查看评论，该文章应该仍然存在。我几乎逐字逐句地替换了列名以及与我的代码相关的任何其他内容。仍在查看 jquery，无法弄清楚为什么它不起作用。我唯一能想到的是我试图显示和隐藏的数据是动态的，而不是静态的。

<div class="dataContentSection">
    <a href="javascript:void(0);" class="folders toggler">
        <h4>
           Folder Name
        </h4>
     </a>
 </div>
 <ul>
    <div class="dataContentSection">
        <div id="message">
          Message Text
        </div>
    </div>
 </ul>
 </div>
4

1 回答 1

3

这个问题是一个两部分的问题。rs 关于每个文件夹下消息的子转发器控件是正确的。一旦通过 .Net 解决了该问题，您就可以解决将显示/隐藏每个文件夹的 jquery 部分。

jquery 部分可以通过多种不同的方式来处理。这是一个示例代码，您可以在准备好处理 jquery 部分后参考：

<script type="text/javascript">
    $(function () {
        $('a').click(function() {
            $(this).parent().children('.dataContentSectionMessages').toggle();
        });
    });
</script>

<div class="dataContentSection">
    <a href="javascript:void(0);" class="folders toggler">
        <h4>
            Folder 1
        </h4>
    </a>
    <div class="dataContentSectionMessages">
        <div id="message1a">
            Message 1a
        </div>
        <div id="message1b">
            Message 1b
        </div>
    </div>
</div>
<div class="dataContentSection">
    <a href="javascript:void(0);" class="folders toggler">
        <h4>
            Folder 2
        </h4>
    </a>
    <div class="dataContentSectionMessages">
        <div id="message2a">
            Message 2a
        </div>
    </div>
</div>

这是一个演示上述内容的 jsfiddle：http: //jsfiddle.net/4PPdz/

于 2013-02-20T23:02:47.870 回答