想要显示前三个div，然后使余数开关
我有一个仪表板，它有一系列面板。在每个面板中都有项目。有时在面板中有很多项目。我只想在面板中显示前三项，然后显示/隐藏剩余部分。想要显示前三个div，然后使余数开关
<div class="dashboard">
<div class="panel">
<!-- these first three should always be visible -->
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<!-- these last two should be hidden -->
<div class="item">
</div>
<div class="item">
</div>
<!-- this button should toggle display of the last two -->
<span class="button toggle"></span>
</div>
<div class="panel">
<!-- this should be untouched because there are only three items -->
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<!-- as there are only three items in this panel, this button does not need to display -->
<span class="button toggle"></span>
</div>
</div>我想在我的青菜用:nth-child(-n+3)，只显示前3个项目，其中的工作，但想不出如何使用jQuery这个配对打开和关闭切换其余的div 。
还值得一提的是，切换应该只显示/隐藏它自己的面板中的项目，而不是所有面板。
只要建立了DOM，就先通过面板循环。在迭代每个面板时，循环遍历其中的项目。当您到达第4项及以后时，向已配置display:none的元素添加一个类，以便这些项最初未显示并显示切换按钮。
然后，在按钮上单击，您只需在该面板中的这些元素上切换该类的使用。
看评论在线：
$(function(){
// *** INITIALIZE THE ITEMS ***
// Loop through the panels...
$(".panel").each(function(index, pan){
// Then through the items in each panel...
var $items = $(".item", pan);
$items.each(function(idx, item){
// If the item is 4th or more, add the hide class, otherwise remove it.
idx > 2 ? $(item).addClass("hide") : $(item).removeClass("hide");
});
// If there are more than 3 items, show the toggle button, otherwise hide it.
$items.length > 3 ? $(".toggleButton", pan).removeClass("hide") : $(".toggleButton", pan).addClass("hide");
});
// *****************************
// Set all toggle buttons to have a common click event handler
$(".toggleButton").on("click", function() {
// Call the toggle function and pass a reference to the
// parent panel so that only the right child items will be toggled
toggleItems(this.parentElement);
});
function toggleItems(panel) {
// Toggle the use of the "hide" class on all the .hide members
// that are in the referenced panel.
$(".hide", panel).toggle("hide");
}
});/* Anytime something needs to be hidden, just give it this class */
.hide {
display: none;
}
/* Just for fun. Not needed for solution: */
.dashboard {
background-color:#bb6;
overflow:auto;
}
.panel {
float:left;
box-sizing:border-box;
width:calc(50% - 10px);
border:1px solid grey;
margin:5px;
padding:5px;
background-color:#cd7;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
<div class="panel">
<div class="item">o item 1</div>
<div class="item">o item 2</div>
<div class="item">o item 3</div>
<div class="item">o item 4</div>
<div class="item">o item 5</div>
<button class="toggleButton">button</button>
</div>
<div class="panel">
<div class="item">o item 1</div>
<div class="item">o item 2</div>
<div class="item">o item 3</div>
<div class="item">o item 4</div>
<div class="item">o item 5</div>
<button class="toggleButton">button</button>
</div>
<div class="panel">
<div class="item">o item 1</div>
<div class="item">o item 2</div>
<div class="item">o item 3</div>
<button class="toggleButton">button</button>
</div>
</div>谢谢@ scott-marcus - 这似乎完美地完成了这项工作。我唯一要补充的是项目在DOM中不固定，它们是从数据库中引入的。这意味着我不知道每个面板中会有多少个，因此不能手动分配“隐藏”类。如何动态添加，如果面板中只有三个项目，切换按钮将如何隐藏？ – Toby
@Toby看到我更新的答案。尽管如此，请尽可能在您的原始问题中尽可能明确，以便我们能够给您准确的答案。 –
// Set the number of items to show
var nrToShow = 3;
var children,nrChildren,nrToShowInThisPanel ;
// get an array of the panels
$(".dashboard .panel").each(function() {
\t // loop on each panel to do the job
\t nrToShowInThisPanel = nrToShow;
\t // Get an array of items in the panel
\t children = $(this).children(".item");
\t nrChildren = children.length;
\t if (nrChildren > nrToShowInThisPanel) {
\t \t // Hide everybody
\t \t \t $(children).hide();
\t \t // Show the first children
\t \t for(var i = 0; i < nrToShowInThisPanel;i++){
\t \t \t $(children[i]).show();
\t \t }
}else{
\t \t $(this).children(".toggle").hide();
\t }
});
$(".toggle").on("click",function(){
\t // on click event :
\t var nrToShowInThisPanel = nrToShow;
\t // figure where we are
\t var panel = $(this).parent();
\t // Get an array of items in the panel
\t children = $(panel).children(".item");
\t nrChildren = children.length;
\t for(var i = nrToShowInThisPanel-1; i < nrChildren;i++){
\t \t $(children[i]).toggle();
\t }
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
<div class="panel">
\t \t <div class="item">one</div>
\t \t <div class="item">two</div>
\t \t <div class="item">three</div>
\t \t <div class="item">four</div>
\t \t <div class="item">five</div>
\t \t <div class="item">six</div>
\t \t <div class="item">seven</div>
\t \t <div class="item">height</div>
\t \t <div class="item">nine</div>
<button class="toggle">button</button>
</div>
<div class="panel">
\t \t <div class="item">one</div>
\t \t <div class="item">two</div>
\t \t <div class="item">three</div>
\t \t <div class="item">four</div>
\t \t <div class="item">five</div>
\t \t <div class="item">six</div>
\t \t <div class="item">seven</div>
\t \t <div class="item">height</div>
\t \t <div class="item">nine</div>
\t \t <button class="toggle">button</button>
\t </div>
\t
\t <div class="panel">
\t \t <div class="item">one</div>
\t \t <div class="item">two</div>
\t \t <button class="toggle">button</button>
\t </div>
</div>你的回答不使用OP的DOM，没有解释，也没有做OP所要求的。 –
OP的要求如何：*“还值得一提的是，切换只能在自己的面板中显示/隐藏项目，而不是所有的面板。”*以及事实上，你没有解释任何你是在做什么？请参阅[“我如何写出一个好的答案？”]（https://*.com/help/how-to-answer） –
有史以来第一个答案。我会在下次尝试满足要求。无论如何，希望它是有用的 – PhilMaGeo
@SilverSurfer还有什么不明白吗？这很清楚。 –