Jquery在.net数据列表中显示/隐藏答案

【问题标题】：Jquery Show/Hide In a .net DatalistJquery在.net数据列表中显示/隐藏
【发布时间】：2023-03-26 10:21:02
【问题描述】：

我有一个 .net Datalist 返回新闻文章，我希望只显示标题，然后当您单击标题链接时显示正文。

这是我目前所拥有的 HTML

<asp:DataList ID="dlNewsArticles" DataSourceID="SqlDataSourceNewsArticles" runat="server">
    <ItemTemplate>
        <div class="news">
            <strong><a class="trigger" href="#"><%#Eval("Headline") %></a> </strong><br />
            <div class="newsarticle"><%#Eval("ArticleBody") %></div>
            <br /><br /><br />
        </div>
        </ItemTemplate>
</asp:DataList>

Javascript

(function ($) {
        $(document).ready(function () {
            $('.newsarticle').hide();
            $('a.trigger').click(function () {
                $(this).next("div").slideToggle();


            });
        });
    })(jQuery);

似乎唯一起作用的部分是在加载时隐藏 .newsarticle div。当谈到 Jquery 时，我是一个完整的菜鸟，所以任何指针都将不胜感激

干杯

【问题讨论】：

标签： jquery .net datalist

【解决方案1】：

next() 函数将返回a 之后的下一个元素。我假设它正在查找 <br/>，它与 "div" 选择器不匹配，因此没有返回任何内容。

我会使用类似的东西

 $(this).parent().siblings("div").slideToggle();

这将转到链接的父元素，在这种情况下为 strong，然后找到 strong 元素的兄弟姐妹，它们是 div，这将找到您正在寻找的那个

【讨论】：

【解决方案2】：

您的选择器不太正确。试一试——

(function ($) {
        $(document).ready(function () {
            $('.newsarticle').hide();
            $('a.trigger').click(function () {
                $(this).parents(".news").children(".newsarticle").slideToggle();
            });
        });
    })(jQuery);

这应该找到具有news 类的单击链接的父“div”，然后找到该din 具有“newsarticle”类的子项。

【讨论】：