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切换一个类（控制show / hide ）

$('.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>

Answer 2

您可以使用以下方式隐藏所有列表中2以下的所有内容：

$('.list ul').each(function(){
    $('li:lt(2)', this).hide();
});

然后你可以将click事件添加到按钮类，并显示所有相关的li：

$('.btn-more').on('click', function(){
    $(this).closest('.list').find('ul li').show(); //Show all
})

希望这有帮助。

＆＃13;

show_less();

$('.btn-more').on('click', function(e){
  e.preventDefault();

  var parent = $(this).closest('.list');

  if(parent.find('li:visible').length==3){
    $('img', this).attr('src','http://www.freeiconspng.com/uploads/arrow-icon-clip-art-file-down-arrow-icon-png-balin-icon-arrow-right--32.png');

    parent.find('ul li').show(); //Show all
  }else{
    $('img', this).attr('src','http://payload350.cargocollective.com/1/6/200896/9316237/down-arrow.png');
    show_less();
  }
})

function show_less(){
  $('.list ul').each(function(){
    $('li:gt(2)', this).hide();
  });
}

＆＃13;

img{
  width:25px;
  height:25px
}

＆＃13;

<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='http://payload350.cargocollective.com/1/6/200896/9316237/down-arrow.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='http://payload350.cargocollective.com/1/6/200896/9316237/down-arrow.png' /></a>
</div>

＆＃13;

Answer 3

您可以使用JQuery的:gt()选择器。演示：

＆＃13;

$("li:nth-of-type(1n+4)").hide();


$(".btn-more").click(function() {
  $(this).closest(".list").find("ul>li:gt(2)").toggle();
});

＆＃13;

<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>

＆＃13;

在第n个项目后隐藏/显示列表

3 个答案: