jquery - .removeClass() 不适用于过滤搜索和分页单击

Question

我正在创建一个 Accordion ，它具有过滤搜索和字母分页功能。

Accordion 由折叠的卡片组成。当用户在搜索框中键入内容时，我希望卡片打开.removeClass('collapsed')，并且当用户从分页中选择字母时，我希望有相同的行为。

由于某种原因，

.removeClass()在这种情况下不起作用。

我可以使用其他方法吗？我做错了什么吗？

有人可以告诉我当用户在搜索框中键入内容或在分页中点击字母时如何使卡片展开吗？

$(document).ready(function() {
  $("#alphf .acco").each(function() {
    $(this).on("click", function() {
      var cat = $(this).data('cat-type');
      var nam = $(this).data('cat-name');
      if (cat != 0) {
        $('#Categories > .acc-row').hide();
        $('#Categories > .acc-row[data-cat-type="' + cat + '"][data-cat-name="' + nam + '"]').show();
      }
    });
  });

  $("#search").on("keyup", function(e) {
    $('button').removeClass('collapsed');

    var value = $(this).val().toLowerCase();
    $('.acc-row').filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<div class="container">
  <nav>
    <ul class="pagination" id="alphf">
      <!-- <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> -->
      <li><a class="acco" href="#" data-cat-name="A" data-cat-type="A">A</a></li>
      <li><a class="acco" href="#" data-cat-name="B" data-cat-type="B">B</a></li>
      <li><a class="acco" href="#" data-cat-name="C" data-cat-type="C">C</a></li>
      <li><a class="acco" href="#" data-cat-name="D" data-cat-type="D">D</a></li>
      <li><a class="acco" href="#" data-cat-name="E" data-cat-type="E">E</a></li>
      <li><a class="acco" href="#" data-cat-name="F" data-cat-type="F">F</a></li>
      <li><a class="acco" href="#" data-cat-name="G" data-cat-type="G">G</a></li>
      <li><a class="acco" href="#" data-cat-name="H" data-cat-type="H">H</a></li>
      <li><a class="acco" href="#" data-cat-name="I" data-cat-type="I">I</a></li>
      <li><a class="acco" href="#" data-cat-name="J" data-cat-type="J">J</a></li>
      <li><a class="acco" href="#" data-cat-name="K" data-cat-type="K">K</a></li>
      <li><a class="acco" href="#" data-cat-name="L" data-cat-type="L">L</a></li>
      <li><a class="acco" href="#" data-cat-name="M" data-cat-type="M">M</a></li>
      <li><a href="#">N</a></li>
      <li><a href="#">O</a></li>
      <li><a href="#">P</a></li>
      <li><a href="#">R</a></li>
      <li><a href="#">S</a></li>
      <li><a href="#">T</a></li>
      <li><a href="#">U</a></li>
      <li><a href="#">V</a></li>
      <li><a href="#">X</a></li>
      <li><a href="#">Y</a></li>
      <li><a href="#">Z</a></li>
      <!-- <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> -->
    </ul>
  </nav>
  <div class="accordion accordian-wrapper" id="accordionStaff">
    Search: <input id="search" type="text">

    <div class="card">
      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      <h5 class="accordian-title">  Department one </h5>
      </button>
        </h2>
      </div>
      <div id="name-cats">
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
          <div class="card-body" id="Categories">
            <div class="row acc-row" data-cat-type="A" data-cat-name="A">
              <div class="col-md-3">
                <p>Aston</p>
              </div>
              <div class="col-md-4">
                <p>Tracker</p>
              </div>
              <div class="col-md-3">
                <p>aston@some.com </p>
              </div>
              <div class="col-md-2">
                <p>Phone:: 1234567890</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="A" data-cat-name="A">
              <div class="col-md-3">
                <p data-cat-type="A">Arleen</p>
              </div>
              <div class="col-md-4">
                <p>Specialist</p>
              </div>
              <div class="col-md-3">
                <p>arleen@firm.is</p>
              </div>
              <div class="col-md-2">
                <p>phone 1239484999</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="J" data-cat-name="J">
              <div class="col-md-3">
                <p data-cat-type="J">John</p>
              </div>
              <div class="col-md-4">
                <p>Registar</p>
              </div>
              <div class="col-md-3">
                <p>jj@arn.com </p>
              </div>
              <div class="col-md-2">
                <p> 1234565469</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="K" data-cat-name="K">
              <div class="col-md-3">
                <p data-cat-type="K">Kyle
                </p>
              </div>
              <div class="col-md-4">
                <p>Driver
                </p>
              </div>
              <div class="col-md-3">
                <p>kdrive@company.com
                </p>
              </div>
              <div class="col-md-2">
                <p> 1234567890
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
        <h5 class="accordian-title">   DepartmentTwo</h5>
      </button>
        </h2>
      </div>
      <div id="name-cats">
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
          <div class="card-body" id="Categories">
            <div class="row acc-row" data-cat-type="A" data-cat-name="A">
              <div class="col-md-3">
                <p id="staff_name" data-cat-type="A">Allan</p>
              </div>
              <div class="col-md-4">
                <p>Specialist</p>
              </div>
              <div class="col-md-3">
                <p>allan@lsome.com </p>
              </div>
              <div class="col-md-2">
                <p>Phone: 1234567890</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="B" data-cat-name="B">
              <div class="col-md-3">
                <p id="staff_name" data-cat-type="B">Brad</p>
              </div>
              <div class="col-md-4">
                <p>IT-Guy</p>
              </div>
              <div class="col-md-3">
                <p>brad@some.com </p>
              </div>
              <div class="col-md-2">
                <p> 1234567890 </p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="B" data-cat-name="B">
              <div class="col-md-3">
                <p>Brent</p>
              </div>
              <div class="col-md-4">
                <p>Specialist</p>
              </div>
              <div class="col-md-3">
                <p>brent@some.com </p>
              </div>
              <div class="col-md-2">
                <p>123456789</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="E" data-cat-name="E">
              <div class="col-md-3">
                <p>Evan</p>
              </div>
              <div class="col-md-4">
                <p>Chef</p>
              </div>
              <div class="col-md-3">
                <p>evan@some.com </p>
              </div>
              <div class="col-md-2">
                <p>123456789</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是一个link to a fiddle

Answer 1

you need to remove collapse not collapsed. try this

 $(document).ready(function() {       $("#alphf .acco").each(function() {
        $(this).on("click", function() {
          var cat = $(this).data('cat-type');
          var nam = $(this).data('cat-name');
          if (cat != 0) {
            $('#Categories > .acc-row').hide();
            $('#Categories > .acc-row[data-cat-type="' + cat + '"][data-cat-name="' + nam + '"]').show();
          }
        });       });

      $("#search").on("keyup", function(e) {
        $('#collapseOne, #collapseTwo').removeClass('collapse');

        var value = $(this).val().toLowerCase();
        $('.acc-row').filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });       
     });    
 });