javascript - 对动态元素使用 JQuery 选择器和 "this"

Question

我有一个包含大量文档的页面，供客户使用，该客户希望用户能够单击页面上列出的每篇文章/项目，并在其下方打开一个小的详细信息 Pane 来展示内容。

我知道这很容易做到，特别是使用 JQuery，但我不太熟悉这门语言，并试图尝试这种动态功能。有超过 50 个文档，因此使用“this”并尝试保持动态而不是显式调用 50 个元素中的每个元素(并且还会降低加载时​​间)的原因。

这是我的 HTML(我只包含列表中的一个元素)...

    <ul class="paging" id="paging">
                <li><a href="">Economics of Ethanol and Bio-butanol as Gasoline Blendstocks<br />
                <strong>Categories:</strong> Oxygenated Fuels Issues, Bio-fuel Economics, Blendstock Valuation, Refining Economics, Refinery Modeling</a>
                <ul style="background:#f8f8f8; width:500px; height:200px;"><li>Here is the text that should appear beneath woot</li></ul>

                </li>

这是我的 JQuery 位...

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

            $('ul.paging > li > ul').hide();

            $('ul.paging > li').click(function() {

                $(this > ul).slideToggle();

            });
        });


    </script>

我的元素被正确隐藏，所以我假设我的选择器没问题？无论如何，推出后没有任何可用功能。有什么想法吗？

谢谢，非常感谢所有帮助!就像我说的，对此非常陌生。 :)再次感谢!

Answer 1

this 的值是一个 DOM 元素。您需要使用它作为 jQuery DOM 遍历方法的基础，例如 .children()。

$(this).children("ul").slideToggle();