Javascript jquery slideDown和slideUp（）不适用于部分显示

是否可以使用jquery滑动函数部分显示和隐藏

基本上，有一个包含7项的列表。但最初只显示前两个，其余的隐藏。我希望当用户点击查看更多内容时，所有7项都会显示出来。当他/她再次单击时，只显示前两个，其余的再次隐藏。但是我做不到。请给我点光，谢谢

jquery：

var ul = $('ul'), 
    showMoreLnk = $('a.show-more');

$('a').click(function(e){

  if(ul.outerHeight() === 38){
    ul.find('li.hide').removeClass('hide').addClass('show');

    ul.slideDown(function(){
        showMoreLnk.text('Show less');
    });

  } else {
    ul.slideUp(function(){
        showMoreLnk.text('Show more');
        ul.find('li.show').removeClass('show').addClass('hide');
    });
  }

  e.preventDefault();

});

HTML:

看看这个。

举个例子：

看看这个。

举个例子： 试试这个：

$('a').click(function (e) {
       e.preventDefault();
       $('ul li.hide').slideToggle('slow');
});

试试这个：

$('a').click(function (e) {
       e.preventDefault();
       $('ul li.hide').slideToggle('slow');
});

查看此代码：

$('a.show-more').click(function (e) {
    e.preventDefault();

    var hidden_list = $('ul li.hide');

    if (hidden_list.is(':hidden')) {
        $(this).html("show less");
        hidden_list.slideDown();
    }
    else {
        $(this).html("show more");
        hidden_list.slideUp();
    }
 });

我还创建了此代码，供您在fiddle中进行测试。请查看以下代码：

$('a.show-more').click(function (e) {
    e.preventDefault();

    var hidden_list = $('ul li.hide');

    if (hidden_list.is(':hidden')) {
        $(this).html("show less");
        hidden_list.slideDown();
    }
    else {
        $(this).html("show more");
        hidden_list.slideUp();
    }
 });

我还创建了这个供您在fiddle中测试