让toggleClass动画像slideToggle一样？

Question

我有一个列表，它显示前三个列表项，其中有一个链接来展开/折叠列表。如果列表有3个或更少的项，则展开/折叠链接不会显示。

当列表展开/折叠时，我遇到的问题是动画。我希望列表幻灯片类似于slideToggle的工作方式，而不是消失。不幸的是，我无法让它与我的代码一起工作。

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

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

<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();
}  
});