我有三个具有相同类名的列表。加载时,每个列表仅显示5个列表项,并且有“显示更多”按钮,单击这些按钮可显示其余列表项。

我想要这样的行为:当为一个列表按下“显示更多”按钮时,它还会显示其他列表的隐藏列表项。

我的困境是3个列表的行为类似于1个大列表,并顺序显示列表项,而不是同时显示所有列表的所有项。

知道我如何才能使所有列表协调一致吗?



$(document).ready(function(){

      var list = $(".list li");
      var numToShow = 5;
      var button = $(".next");
      var numInList = list.length;
      list.hide();
      if (numInList > numToShow) {
        button.show();
      }
      list.slice(0, numToShow).show();

      button.click(function(){
          var showing = list.filter(':visible').length;
          list.slice(showing - 1, showing + numToShow).fadeIn();
          var nowShowing = list.filter(':visible').length;
          if (nowShowing >= numInList) {
            button.hide();
          }
      });

});

.list {
	padding: 0;
	margin: 0;
}

.list li {
	position: relative;
	margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> LIst 1</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 2</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 3</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
</div>

最佳答案

您必须单独处理列表,如下所示:



$(document).ready(function(){

  var $list = $(".list");
  var numToShow = 5;
  var $buttons = $(".next");
  $buttons.hide();

  $list.each(function() {
    var $listItems = $(this).find("li");
    var $button = $(this).next('.next');
    var numInList = $listItems.length;
    $listItems.hide();
    if (numInList > numToShow) {
      $button.show();
    }
    $listItems.slice(0, numToShow).show();
  })

  $buttons.click(function(){
    var $this = $(this);
    var $list = $this.prev(".list");
    var $listItems = $list.find("li");
    var showing = $listItems.filter(':visible').length;
    $listItems.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = $listItems.filter(':visible').length;
    var numInList = $listItems.length;
    if (nowShowing >= numInList) {
      $this.hide();
    }
  });

});

.list {
	padding: 0;
	margin: 0;
}

.list li {
	position: relative;
	margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h1> LIst 1</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 2</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 3</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
</div>

关于javascript - 在jQuery中定位多个列表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48847504/

10-12 12:47
查看更多