javascript - 隐藏/显示第 n 项后的列表

Question

我有两个列表:

<div class="list">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>
<a href="#" class="btn-more"><img src="../img/more.png"></a>
</div>

<div class="list">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>
<a href="#" class="btn-more"><img src="../img/more.png"></a>
</div>

我想展示前三项。当我点击 .btn-more

时显示/隐藏(切换)其他项目

我尝试使用动态数字:

$('.list ul').each(function(){
    var max = 2;

    if ($(this).find("li").length > max) {
        $(this).find('li:gt('+max+')').hide()
    }
});

这是可行的，但我不知道在哪里添加按钮的代码以显示/隐藏其他项目。

Answer 1

我会使用 CSS 来完成此操作，然后使用 jquery 切换一个类(控制显示/隐藏)

$('.list .btn-more').on('click',function(e) {
    e.preventDefault();
    $(this).closest('.list').toggleClass('open');
});

.list li:nth-child(n+3){display:none;}
.list.open li:nth-child(n+3){display:list-item;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
  <a href="#" class="btn-more">
    <img src="../img/more.png">
  </a>
</div>

<div class="list">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
  <a href="#" class="btn-more">
    <img src="../img/more.png">
  </a>
</div>