主页 / 问题 / 1136282
Accepted
Sevastopol'
Asked:2020-06-04 18:53:04 +0000 UTC2020-06-04 18:53:04 +0000 UTC

如何仅显示块中的前几个元素，并在单击时显示其余元素？

  • 772

该页面包含.container带有嵌套元素的块。任务是仅显示块中的前 3 个元素。如果块中的元素超过三个，则隐藏其余元素并显示一个链接，其中包含隐藏在块中的元素数量。您能告诉我如何实施吗？谢谢

$(document).ready(function() {
  $('.container').find('span:gt(2)').hide()
  $('.container').append('<div class="add">Ещё</div>');
  $('.add').append('<div class="number_hidden"></div>');
  $(".number_hidden").text($(".container span").length)
});
$(".add").click(function() {
  $(".container").find('span').show();
});
.container span {display: inline-block; margin: 5px; width: 20px; height: 20px; border: 1px solid black;}

.add {display: inline-block; border: none; cursor: pointer;}

.number_hidden {display: inline-block; border: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

javascript

3 个回答

  1. 是这样吗？

    $(".container").each(function(){
   const show = 3;
   let spans = $(this).children("span");

   if( spans.length > show){
      spans.slice(show).hide();

      const tpl = '<a href="#" class="add">Еще [num]</a>';
      let a = tpl.replace("[num]", spans.length - show);
      $(a).appendTo(this);
   }
});

$(".container").on('click', '.add', function(e){
   e.preventDefault();
   $(this).hide()
          .prevAll('span')
             .show();
});
    .container span {display: inline-block; margin: 5px; width: 20px; height: 20px; border: 1px solid black;}

.container span:nth-child(n+4){
  display: none;
}

.add {display: inline-block; border: none; cursor: pointer;}

.number_hidden {display: inline-block; border: none;}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

    • 4
  2. Best Answer

    $(function() {
  $(".container").each(function() {
    let $span = $(this).find("span");
    if( $span.length <= 3 ) return;

    $span.slice(3).hide();    
    $(this).append('<a class="js-show">Еще ' + ($span.length - 3) + '...</a>');
  });
  
  $(".container").on("click", ".js-show", function() {
    $(this).siblings("span").show().end().remove();    
  });
});
    .container span {display: inline-block; margin: 5px; width: 20px; height: 20px; border: 1px solid black;}

.add {display: inline-block; border: none; cursor: pointer;}

.number_hidden {display: inline-block; border: none;}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

    但是有可能它会在等待 HTML 加载以隐藏多余的内容时抽搐。因此，您可以在 CSS 中初步指定不可见性：只有三个，因此手动添加并不难：

    .container span { display: none; }
.container span:nth-child(1),
.container span:nth-child(2),
.container span:nth-child(3) { display: inline-block; }
    • 3 

  3. let max = 3;

$('.container').each(function(){
  let items = $(this).find('span'),
      len = items.length;
  if(len > max) {
    items = items.slice(max, len);
    items.wrapAll('<div class="-hidden"></div>');
    $(this).append('<div class="-show">+ ещё '+(len-max)+'</div>');
  }
}).on('click', '.-show', function(){
  $(this).closest('.container').find('.-hidden > span').unwrap();
  $(this).remove();
});
    .container span {
  display: inline-block;
  margin: 5px;
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.container .-hidden {
  display: none;
}

.container .-show {
  display: inline-block;
  color: green;
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

    • 2

相关问题