Question

我有一个页面，其中有大量文档供客户使用，他们希望用户能够点击页面上列出的每篇文章/项目，并在其下面打开一个小细节窗格，让他们陶醉内容。

我知道这很容易做到，特别是对于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();

Answer 2

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

或者

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

Answer 3

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

$(this > ul).slideToggle();

你最好用这个：

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

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

使用JQuery选择器和“this”用于动态元素

3 个答案: