Html <ul> TranslateX </ul>

Question

我有一个带有30个li元素的ul-Element，但只显示了20个元素，溢出被隐藏了。现在我想展示最后20个元素。是否有ul-Element或其他的translateY（X）-Method？

Fesp

Answer 1

您需要滚动元素以显示“在首屏下方”的孩子。根据它们是堆叠在一起还是连续堆叠，您需要使用ul.scrollTop或ul.scrollLeft（来自JavaScript）。

Answer 2

这个解决方案正在进入那个大模糊的问题。希望它会命中！

 <ul id="ul_id" style="height:200px;overflow:hidden;">
      <li></li>
      ...
 </ul>
 <script type="text/javascript">
      document.getElementById('ul_id').scrollTop=150;
 </script>

您可以在javascript中使用“scrollTop”滚动div。只需设置所需的偏移量（以像素为单位）。

Answer 3

我知道不是CSS HTML方法。但是我能想到做你所要求的唯一方法（如果我猜对了）是通过jQuery，所以......

这将动态添加“查看更多...”的额外li，点击后，它会在列表中显示更多项目。

$(function() { 
var hiddenStuff = $('.list li:gt(5)').hide();
if (hiddenStuff.size() > 0) {
  var theCaption = '... See More';
  $('.list').append(
      $('<li class="more" id="toggler">' + theCaption + '</li>')
          .toggle( function() { 
              hiddenStuff.slideDown(1000);
              $(this).text('...See Less');
          }, 
          function() { 
              hiddenStuff.slideUp(1000);
              $(this).text(theCaption);
          })
        );
    }
});

jsFiddle Demo HERE

仅限CSS的解决方案，可在此处为您服务：CSS-ONLY DEMO