Question

我有一个.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来说，这是一个完整的Noob，所以任何指针都会被感激地收到

干杯

Answer 1

你的选择器不太对劲。试试 -

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

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

Answer 2

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

我会使用像

这样的东西

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

这将转到链接的父元素，在这种情况下为strong，然后找到作为div的strong元素的兄弟，这将找到您正在寻找的那个< / p>

Jquery在.net Datalist中显示/隐藏

2 个答案: