javascript - 在折叠 jQuery 中显示结果

Question

我有我的 HTML，它是一个包含几个面板的 Accordion 。我已经包含了一个搜索框来搜索特定的面板。我能够搜索并找到结果。我很难显示崩溃的结果。最初，所有面板都会折叠起来，搜索结果后，它应该在(折叠在)中 - 显示完整的内容，而不仅仅是面板标题。

我的 HTML:-

<div class="container" 
 id="page_container">
   <div id="accordion_search_bar_container">
  <input type="search" 
     id="accordion_search_bar" 
     placeholder="Search"/>
  </div>
  <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" 
         href="#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" 
         href="#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" 
         href="#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 是

(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();
   $('#accordion > .panel').each(function () {
    panelContainerId = '#' + $(this).attr('id');
    $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + 
   '))').hide();
  $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + 
  ')').show();
   });
  });
  }());

有了搜索结果，我应该给出折叠面板 View 。

显示()。崩溃；

有人可以帮我吗？

Answer 1

@Indu Velayutham，

在初始级别，所有面板都处于折叠模式。因此，$(".panel-collapse").css("display","none") 与页面加载一起存在，

现在，当您尝试搜索时，您的搜索框中会有一些值，[即标题搜索已经在您的案例中起作用]

因此相应地放置一个逻辑，如果找到标题，则将 display:none css 切换为 display:block因此可搜索面板中的所有内容都是可见的。

(仅供引用，这里没有说明用户是使用 bootstrap 还是任何其他 js。所以我只是根据基本的 jquery 基础给出我的答案:))

尝试，

(function(){
    $(".panel-collapse").css("display","none");
    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();
  //
   $('#accordion > .panel').each(function () {
    panelContainerId = '#' + $(this).attr('id');
   
    if(searchTerm != "")
    {
      $(this).find(".panel-collapse").css("display","block");
    }
    else{
      $(this).find(".panel-collapse").css("display","none");
    }
    $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + 
   '))').hide();
     $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + 
    ')').show();
   });
  });
  }());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>
  <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" 
         href="#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" 
         href="#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" 
         href="#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>

让我知道这个案例适合你吗？