Question

我有一个显示前3个列表项的列表，并带有用于扩展/折叠列表的链接。如果列表中包含3个或更少的项目，则不会显示展开/折叠链接。

列表扩展/折叠时，动画存在问题。我不想让它淡入淡出，而是希望它具有类似于slideToggle的工作原理。不幸的是，我无法将其用于我的代码。

有人有什么建议吗？任何帮助将不胜感激！

下面是我的代码，这是我的Codepen。 https://codepen.io/anon/pen/OwGKog

HTML

<div id="feature-list">

  <ul id="product-features">
    <li>Feature 1</li>
    <li>Feature 2</li>
    <li>Feature 3</li>
    <li>Feature 4</li>  
    <li>Feature 5</li>
    <li>Feature 6</li>  
  </ul>

  <span id="feature-more">More Features</span>
  <span id="feature-less">Less Features</span>

</div>

CSS

#feature-list li:nth-child(n+4) {
    display: none;
}

#feature-list.open li:nth-child(n+4) {
    display: list-item;
}

#feature-more,
#feature-less {
    color: blue;
    display: none;
    cursor: pointer;
}

JS

$( document ).ready(function() {
    $('#feature-list #feature-more').on('click', function(e) {
        e.preventDefault();
        $(this).closest('#feature-list').toggleClass('open');
        $('#feature-more').hide();
        $('#feature-less').show();
    });
    $('#feature-list #feature-less').on('click', function(e) {
        e.preventDefault();
        $(this).closest('#feature-list').toggleClass('open');
        $('#feature-less').hide();
        $('#feature-more').show();
    });
    if ($('#feature-list > ul > li').length > 3) {
        $('#feature-more').show();
    }  
});

Answer 1

在这里，这似乎可以解决问题。

$( document ).ready(function() {
$('#feature-list #feature-more').on('click', function(e) {
    e.preventDefault();
    $('ul li:gt(2)').slideToggle();
    $('#feature-more').hide();
    $('#feature-less').show();
});
$('#feature-list #feature-less').on('click', function(e) {
    e.preventDefault();
    $('ul li:gt(2)').slideToggle();
    $('#feature-less').hide();
    $('#feature-more').show();
});
if ($('#feature-list > ul > li').length > 3) {
    $('#feature-more').show();
}  
});

使toggleClass像slideToggle一样动画？

1 个答案: