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>时，不确定为何＆＃34;显示更多＆＃34; 链接时使用<a>的原因。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: