如何显示是否有超过3项？

Question

我试图找出如何使Show More显示每个容器中是否有超过3个列表项。我没有取得任何成功，可能是因为我没有正确定位容器列表项。谁能帮我吗？谢谢。

HTML

<a href="#" class="main">Women</a>
<div class="dropDown">
  <div class="taxonomy">
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <span class="show-more">Show More</span>
  </div>
</div>

<a href="#" class="main">Men</a>
<div class="dropDown">
  <div class="taxonomy">
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <span class="show-more">Show More</span>
  </div>
</div>

<a href="#" class="main">Children</a>
<div class="dropDown">
  <div class="taxonomy">
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <span class="show-more">Show More</span>
  </div>
</div>   

CSS

a {
  text-decoration: none;
  font-size: 20px;
  margin: 0 2em;
}

.dropDown {
  margin: 0 0 2em;
}

li {
  list-style: none;
}

span.show-more {
  display: none;
}

JQUERY

$('#dropDown').each(function() {
  if($(this).children().children('li').length > 3) {
    $(this).children('.show-more').show();
  }
});

Answer 1

我决定重新实现我的，所以它会自动为“更多”/“更少”按钮生成html。

$(".readmore").each(function () {
  var $this = $(this),
      $lis = $this.children(),
      $a = $("<a href='javascript:void(0)'>Less</a>")
  if ($lis.length > 3) {
    $this.after($a);
    $a.click(function () {
      $lis.slice(3).toggle();
      $a.html($a.html() === "More" ? "Less" : "More")
    }).click();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="readmore">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
<ul class="readmore">
  <li>less than three</li>
  <li>still less than three</li>
</ul>

Answer 2

检查容器列表数组长度并显示基于数组长度显示更多文本。

Answer 3

我基于你现有的html结构的答案。但是，我认为它应该被清理和纠正。一些注意事项：

• 你是<li>元素应该是<ol>或<ul>（不是<div>）的孩子。
• 我没有对你的<a>标签标题做任何事情，因为我不确定你要用它们做什么。
• 不知道为什么你使用<span>作为“显示更多”链接，当你可以使用<a>。

无论如何，我通过保持你的结构完整来建立我的答案。我所做的是通过仅过滤<div>元素得到<li>的长度，如果长度> 3则显示show“show more”。我还隐藏任何索引为3或更大的元素。然后我为你的“show more”<span>标签创建了一个点击处理程序。

$('.dropDown div').each(function() {
  var list = $(this).children().filter("li");

  $.each(list, function(i, value) {
    if (i > 2) $(this).hide();
  });

  if (list.length > 3) {
    $(this).find(".show-more").show();
  }
});

$(".show-more").click(function () {
  $(this).closest("div").children().filter("li").show();
  $(this).hide();
});

a {
  text-decoration: none;
  font-size: 20px;
  margin: 0 2em;
}

.dropDown {
  margin: 0 0 2em;
}

li {
  list-style: none;
}

span.show-more {
  text-decoration: underline;
  cursor: pointer;
  color: #00F;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="main">Women</a>
<div class="dropDown">
  <div class="taxonomy">
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <span class="show-more">Show More</span>
  </div>
</div>

<a href="#" class="main">Men</a>
<div class="dropDown">
  <div class="taxonomy">
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <span class="show-more">Show More</span>
  </div>
</div>

<a href="#" class="main">Children</a>
<div class="dropDown">
  <div class="taxonomy">
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <li>Sweater</li>
    <li>T-Shirt</li>
    <li>Shorts</li>
    <span class="show-more">Show More</span>
  </div>
</div>