Question

是否可以使用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：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="hide">Item 3</li>
  <li class="hide">Item 4</li>
  <li class="hide">Item 5</li>
  <li class="hide">Item 6</li>
  <li class="hide">Item 7</li>
</ul>
<a href="#" class="show-more">show more</a>

CSS：

.hide{
  display: none;
}
.show{
  display: block;
}

Answer 1

试试这个：

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

Answer 2

检查一下。 http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/

和示例： http://sim.plified.com/jQuery/slide/#

Answer 3

查看此代码：

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

我还创建了这个，让你在小提琴http://jsfiddle.net/Shanison/H4vbB/2/

中进行测试

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

3 个答案: