0

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

我知道这很容易做到，尤其是使用 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>

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

谢谢您，非常感谢您的所有帮助！就像我说的，这很新。：） 再次感谢！

4

3 回答 3

2

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

$(this).children("ul").slideToggle();
于 2013-02-18T17:23:27.450 回答
2

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

或者

$(this).find('ul').slideToggle();
于 2013-02-18T17:23:29.267 回答
0

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

$(this > ul).slideToggle();

你最好使用这个：

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

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

于 2013-02-18T17:26:16.037 回答