想显示前三个div，然后进行余切换

Question

我有一个带有一系列面板的仪表板。在每个面板中都有项目。有时面板中有很多项目。我只想显示面板中的前三个项目，然后显示一个切换来显示/隐藏剩余部分。

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

我尝试在我的sass中使用:nth-child(-n+3)来显示前3个项目，但是无法确定如何将其与jquery配对以打开和关闭剩余的div。

还值得一提的是，切换只应显示/隐藏自己面板中的项目，而不是所有面板。

Answer 1

构建DOM后，首先遍历面板。当您遍历每个面板时，循环遍历其中的项目。当您到达第4项及更高项目时，请为已配置display:none的元素添加一个类，以便最初显示这些项目并显示切换按钮。

然后，在您点击按钮时，您只需在面板中的那些元素上切换该类的使用。

见内联评论：

＆＃13;

＆＃13;

$(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");
  }
});

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

      // Set the number of items to show
     var nrToShow = 3;
     var children,nrChildren,nrToShowInThisPanel ;
     // get an array of the panels
    $(".dashboard .panel").each(function() {
    	// loop on each panel to do the job
    	nrToShowInThisPanel = nrToShow;
    	// Get an array of items in the panel
    	children = $(this).children(".item");
    	nrChildren = children.length;
    	if (nrChildren > nrToShowInThisPanel) {
    		// Hide everybody
    			$(children).hide();  
    		// Show the first children
    		for(var i = 0; i < nrToShowInThisPanel;i++){
    			$(children[i]).show();
    		}
        }else{
    		 $(this).children(".toggle").hide();
    	}
    
    });
    
    $(".toggle").on("click",function(){
    	// on click event :
    	var nrToShowInThisPanel = nrToShow;
    	// figure where we are
    	var panel = $(this).parent();
    	// Get an array of items in the panel
    	children = $(panel).children(".item");
    	nrChildren = children.length;
    
    	for(var i = nrToShowInThisPanel-1; i < nrChildren;i++){
    		$(children[i]).toggle();
    	}
    });

＆＃13;

<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">one</div>
    		<div class="item">two</div>
    		<div class="item">three</div>
    		<div class="item">four</div>
    		<div class="item">five</div>
    		<div class="item">six</div>
    		<div class="item">seven</div>
    		<div class="item">height</div>
    		<div class="item">nine</div>
            <button class="toggle">button</button>    
        </div>
    
        <div class="panel">
    		<div class="item">one</div>
    		<div class="item">two</div>
    		<div class="item">three</div>
    		<div class="item">four</div>
    		<div class="item">five</div>
    		<div class="item">six</div>
    		<div class="item">seven</div>
    		<div class="item">height</div>
    		<div class="item">nine</div>
    		<button class="toggle">button</button>    
    	</div>
    	
    	 <div class="panel">
    		<div class="item">one</div>
    		<div class="item">two</div>
    		<button class="toggle">button</button>    
    	</div>
    </div>

＆＃13;

＆＃13;

＆＃13;