想要显示前三个 div，然后让剩余部分切换

Question

我有一个包含一系列面板的仪表板。在每个面板中都有项目。有时面板中有很多项目。我只想显示面板中的前三个项目，然后切换到 show/hide 其余项目。

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

还值得一提的是，切换应该只 show/hide 它自己面板中的项目，而不是所有面板。

Answer 1

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

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

查看内联评论：

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

Answer 2

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

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

想要显示前三个 div，然后让剩余部分切换

Want to show first three divs, then make remainder toggle

javascript

jquery

toggle