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

Question

我有一个页面，里面有很多文档，客户希望用户能够点击页面上列出的每一篇文章/项目，并在下面打开一个小的详细信息窗格来展示内容。

我知道这很容易做到，尤其是使用JQuery，但我并不精通这种语言，也不想尝试这种动态功能。有超过50个文档，因此使用"this"并试图保持动态，而不是显式地调用50个元素中的EACH（并降低加载时间）。

这是我的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();

Answer 2

$(this > ul)应该看起来像$('ul', this)

或

$(this).find('ul').slideToggle();

Answer 3

这里的选择器可能是您的问题：

$(this > ul).slideToggle();

你可能最好使用这个：

$(this).find('ul').slideToggle();

我还建议将ul的CSS样式默认为隐藏，这样它们就不会在文档就绪事件之前在屏幕上闪烁。