我有三个具有相同类名的列表。加载时,每个列表仅显示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/