Question

我目前正在构建一种功能，在点击Show More按钮后显示所有内容。我在检查了一些教程之后设法制作了一个但不必点击每个Show More按钮，它将显示所有隐藏的内容。

最初它会显示第一个标题和第一个列表，其余的将隐藏标题和列表，直到点击Show More按钮

https://jsfiddle.net/clestcruz/z0qvv7tk/4/

<h3>List 1</h3>
<ul class="expandible">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    <li>Option 7</li>
</ul>

<h3>List 2</h3>
<ul class="expandible">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    <li>Option 7</li>
</ul>

$('ul.expandible').each(function(){
    var $ul = $(this),
        $lis = $ul.find('li:gt(4)'),
        isExpanded = $ul.hasClass('expanded');
    $lis[isExpanded ? 'show' : 'hide']();

    if($lis.length > 0){
        $ul
            .append($('<li class="expand"><span>' + (isExpanded ? 'Show Less' : 'Show More') + '</span></li>')
            .click(function(event){
                var isExpanded = $ul.hasClass('expanded');
                event.preventDefault();
                $(this).text(isExpanded ? 'More' : 'Less');
                $ul.toggleClass('expanded');
                $lis.toggle();
            }));
    }
});

Answer 1

可能是这样的吗？添加2个链接以显示和折叠所有。

HTML

<a href="#" class="show-all">show all</a>
<a href="#" class="close-all">collapse all</a>

JS

$(".show-all").click(function(e) {
  $("ul li").show();
  $(".expand").text("Show Less");
  e.preventDefault();
});

$(".close-all").click(function(e) {
  $("ul").find('li:gt(2)').hide();
  $(".expand")
    .show()
    .text("Show More");
  e.preventDefault();
});

更新了您的fiddle

点击＆＃39;显示更多＆＃39;

1 个答案: