javascript - Jquery show hide 没有按预期工作？

Question

我有以下 HTML 结构，我需要显示/隐藏过滤器元素。 我的用例是，在页面加载时，每个过滤器组应限制为 3 个过滤器元素，并可选择在单击 + 按钮时展开更多。 必须执行相同的操作才能在单击 - 按钮时仅显示前 3 个过滤器元素。 对于前。我有尺寸作为过滤器组和过滤器元素作为 S、M、L、XL、XXL。我只想在页面加载时显示 3 个元素，其余元素必须隐藏。单击 + 按钮时，应显示所有元素。 单击 - 按钮，仅显示前 3 个元素(S、M、L)。下面是我已经尝试过但没有出现的代码示例和 Jquery。

$(document).ready(function() {
  $(".showLess").hide();
  // used to hide elements which are > 3 in numbers
  $('.list-group-item label:lt(3)').next().hide();
  // On click of + button need to show rest of the filter elements
  $('.loadMore').click(function() {
    $(".showLess").show();
    $('.list-group-item label:lt(5)').next().show();
  });
  // On click of - button need to show only top 3 filter elements
  $('.showLess').click(function() {
    $(".showLess").hide();
    $('.list-group-item label').closest().not(':lt(3)').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">

      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59">S
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="60">M
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">L
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XL
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XXL
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>
    </div>
  </div>
  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <div id="filter-group21" class="cf">
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="144">Chiffon
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="145">Corduroy
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Cotton
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Wool
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Silk
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>

    </div>
  </div>
</div>

Answer 1

第一个问题，您正在调用 $(".showLess").show(); 因此它选择所有具有 showLess 类的元素。你对列表做同样的事情。无需在 JavaScript 中执行所有这些逻辑，您可以在 CSS 中通过添加和删除类来完成。

$(document).ready(function() {
  
  $('.loadMore, .showLess').click(function() {
    var btn = $(this);
    var isMore = btn.hasClass("loadMore")
    btn.closest(".list-group-item").toggleClass("active", isMore);
  });

  
});

.showLess {
   display: none;  
}
.list-group-item > div > label {
    display: block;
}
.list-group-item > div > label:nth-of-type(1n+3) {
  display: none;
}


.list-group-item.active .showLess {
  display: block;
}
.list-group-item.active .loadMore {
  display: none;
}
.list-group-item.active > div > label:nth-of-type(1n+3) {
  display: block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">

      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59">S
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="60">M
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61">L
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61">XL
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61">XXL
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>
  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <div id="filter-group21" class="cf">
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="144">Chiffon
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="145">Corduroy
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Cotton
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Wool
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Silk
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>

    </div>
  </div>
</div>

如果你真的想用 JavaScript 来做，你的代码需要像这样(未经测试)

$('.loadMore').click(function() {
    var btn = $(this);
    btn.siblings(".showLess").show();
    btn.hide();
    btn.parent().find("label").show();
  });
  // On click of - button need to show only top 3 filter elements
  $('.showLess').click(function() {
    var btn = $(this);
    btn.siblings(".loadMore").show();
    btn.hide();
    btn.parent().find("label:gt(3)").hide();
  });