Question

我创建了一个手风琴面板，并创建了一个搜索功能。在我的应用程序中，我确实有一个重置按钮，该按钮应该删除我的搜索并显示所有手风琴面板的正常视图，并且可以切换。我已经完成重置，并且重置后遇到切换问题。我已经为此添加了JSFiddle。可以有人帮我解决这个问题。

我的jQuery：-

(function() {
  var searchTerm, panelContainerId;
  $.expr[':'].containsCaseInsensitive=function(n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=
      0;
  };

  $('#accordion_search_bar').on('change keyup paste click', function() {

    searchTerm=$(this).val();
    var textboxval=$("#accordion_search_bar").val();
    $('#accordion > .panel').each(function() {
      debugger;
      panelContainerId='#'+$(this).attr('id');
      var BodyId=panelContainerId.split('_')[0];
      $(panelContainerId+':not(:containsCaseInsensitive('+searchTerm+
        '))').hide();
      $(panelContainerId+':containsCaseInsensitive('+searchTerm+
        ')').show();
      if(textboxval.length>2) {
        $(BodyId).css('display', 'block');
      }
      else {
        $(BodyId).css('display', 'none');
      }
    });
  });

  $('#showAll').click(function() {

    $('#accordion > .panel').each(function() {
      panelContainerId='#'+$(this).attr('id');
      var BodyId=panelContainerId.split('_')[0];
      $(panelContainerId+':not(:containsCaseInsensitive('+searchTerm+
        '))').show();
      $(panelContainerId+':containsCaseInsensitive('+searchTerm+
        ')').show();
      $(BodyId).css('display', 'none');

      /* $(BodyId).css('display','none'); */
    });
  });

http://jsfiddle.net/indhu_velayutham/eu7crj4a/

Answer 1

在这种情况下，使用display：block或none不正确。手风琴显示的内容在课堂上请检查所截取的代码。

(function() {
  var searchTerm, panelContainerId;
  $.expr[':'].containsCaseInsensitive = function(n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >=
      0;
  };

  $('#accordion_search_bar').on('change keyup paste click', function() {

    searchTerm = $(this).val();
    var textboxval = $("#accordion_search_bar").val();
    $('#accordion > .panel').each(function() {
      debugger;
      panelContainerId = '#' + $(this).attr('id');
      var BodyId = panelContainerId.split('_')[0];
      $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm +
        '))').hide();
      $(panelContainerId + ':containsCaseInsensitive(' + searchTerm +
        ')').show();
      if (textboxval.length > 2) {
        $(BodyId).attr('class', 'panel-collapse collapse in');
      } else {
        $(BodyId).attr('class', 'panel-collapse collapse');
      }
    });
  });

  $('#showAll').click(function() {

    $('#accordion > .panel').each(function() {
      panelContainerId = '#' + $(this).attr('id');
      var BodyId = panelContainerId.split('_')[0];
      $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm +
        '))').show();
      $(panelContainerId + ':containsCaseInsensitive(' + searchTerm +
        ')').show();
      $(BodyId).attr('class', 'panel-collapse collapse');
      $("#accordion_search_bar").val('');
      // $(BodyId).css('display','none');


      /* $(BodyId).css('display','none'); */

    });
  });
}());

body {
  background: gray;
  padding: 20px;
  font-family: Helvetica;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" id="page_container">
  <div id="accordion_search_bar_container">
    <input type="search" id="accordion_search_bar" placeholder="Search" />
  </div>
  <button class="btn btn-success" id="showAll">RESET ALL</button>
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-success" id="collapseOne_container">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a role="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        One
      </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <p>Pellentesque convallis dolor</p>
          <p>Enim at tincidunt magna dapibus vitae</p>
        </div>
      </div>
    </div>
    <div class="panel panel-primary" id="collapseTwo_Container">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Two
      </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          <p>Vestibulum in laoreet nisi</p>
          <p>Sit amet placerat massa</p>
        </div>
      </div>
    </div>
    <div class="panel panel-danger" id="collapseThree_Container">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Three
      </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          <p>Curabitur sem eros tempor sit</p>
          <p>Amet nunc eget, gravida mollis</p>
        </div>
      </div>
    </div>
  </div>
</div>

重置我的手风琴搜索-jQuery

1 个答案: