javascript - 展开全部或折叠全部

我们正在为我们的项目创建FAQ部分。

每个常见问题解答都有一个滑动开关，可以向上或向下滑动常见问题解答的答案。

我们使用的js是：

$(function ()
            {
                $('input#search_term').quicksearch('.portlet ul li',
                {
                    loader: 'span.loader'
                    , onBefore: function ()
                    {
                        $('.answer').hide ();
                    }
                    , noResults: '#no_results'
                });

                $('#search-bar form').live ('submit' , function () { return false; });
                $('.faq .answer').hide ();
                $('.faq p a').live ('click' , function () { $(this).parent ().next ('.answer').slideToggle (); });
            });

每个问题的html包含在单独的LI标签中，如下所示：

<li style="display:none;">
<p><span class="plus_icon">+</span><a class="faq" href="javascript:;">Question Title here</a></p>
    <div class="answer">
        <p>Answer here</p>
    </div>

我要做的就是添加一个元素，该元素使onclick扩展所有LI或收缩所有LI

谁能帮忙。

最佳答案

您只需要一个选择器即可选择要扩展/收缩的所有元素。如果有的话，您可以在上面选择并使用slideDown（）或slideUp（）一次滑动所有它们； jQuery会一次影响所有这些。像这样：

HTML：

<span id="expand-all">Expand All</span>
<span id="contract-all">Contract All</span>

JS：

$('#expand-all').click(function() {$('.answer').slideDown();});
$('#contract-all').click(function() {$('.answer').slideUp();});

关于javascript - 展开全部或折叠全部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7451991/