显示/隐藏html中的列表项

Question

我有几个项目的列表，我需要少显示它们，而在单击按钮后显示更多。.我已经通过一些代码实现了。但是这些列表项目在“ display：list-item”中，我需要在“ display ：inline / inline-block“

 $(function() { $('span').click(function() { $('#datalist li:hidden').slice(0, 2).show(); if ($('#datalist li').length == $('#datalist li:visible').length) { $('span ').hide(); } }); }); 

 ul li:nth-child(n+3) { display: none; } ul li { border: 1px solid #aaa; } span { cursor: pointer; color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul id="datalist"> <li>dataset1</li> <li>dataset1</li> <li>dataset2</li> <li>dataset2</li> <li>dataset3</li> <li>dataset3</li> <li>dataset4</li> <li>dataset4</li> <li>dataset5</li> <li>dataset5</li> </ul> <span>readmore</span> 

Answer 1

只需更改以下代码即可：

$('#datalist li:hidden').slice(0, 2).show();

至

$('#datalist li:hidden').slice(0, 2).css('display','inline-block');

无需额外的课程。 如果要添加CSS动画，则可以使用类。

 $(function() { $('span').click(function() { $('#datalist li:hidden').slice(0, 2).css('display','inline-block'); if ($('#datalist li').length == $('#datalist li:visible').length) { $('span ').hide(); } }); }); 

 ul li:nth-child(n+3) { display: none; } ul li { border: 1px solid #aaa; display:inline-block; } span { cursor: pointer; color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul id="datalist"> <li>dataset1</li> <li>dataset1</li> <li>dataset2</li> <li>dataset2</li> <li>dataset3</li> <li>dataset3</li> <li>dataset4</li> <li>dataset4</li> <li>dataset5</li> <li>dataset5</li> </ul> <span>readmore</span> 

Answer 2

与其使用jquery的.show() .hide()和.show() ， .addClass()将.addClass()和.removeClass()与将切换“ display：none”的类一起使用。 这样，您将恢复为display:list-item而不是block / inline-block ：

 $(function() { $('span').click(function() { $('#datalist li:hidden').slice(0, 2).removeClass('displayNone'); if ($('#datalist li').length == $('#datalist li:visible').length) { $('span ').addClass('displayNone'); } }); }); 

 .displayNone { display: none; } ul li { border: 1px solid #aaa; } span { cursor: pointer; color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul id="datalist"> <li>dataset1</li> <li>dataset1</li> <li class="displayNone">dataset2</li> <li class="displayNone">dataset2</li> <li class="displayNone">dataset3</li> <li class="displayNone">dataset3</li> <li class="displayNone">dataset4</li> <li class="displayNone">dataset4</li> <li class="displayNone">dataset5</li> <li class="displayNone">dataset5</li> </ul> <span>readmore</span>