如何使用JS搜索槽式嵌套手风琴

时间：2018-12-24 16:09:42

标签： jquery html

我想使用嵌套的手风琴创建某种FAQ页面，但是它有些不起作用。我想搜索每张卡的标题和正文。到目前为止，我只能通过标题搜索，并且它仍然没有隐藏不相关的结果。

当我搜索“ nostro 3”时，什么都没有显示。只有当我键入“做什么”时，第一个父级手风琴才会消失。

我想搜索所有内容并隐藏与搜索结果无关的无关信息。

$(document).ready(function() {
  $("#searchfaq").on("keypress click input", function() {
    var val = $(this).val();

    if (val.length) {
      $(".accordion .card").hide().filter(function() {
        return $('.card-title', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
      }).show();
    } else {
      $(".accordion .card").show();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

<!-- Search Bar -->
<div class="row gap-y">
  <div class="offset-md-2 col-md-8 col-12">
    <div class="form-group input-group">
      <input id="searchfaq" type="text" class="form-control" placeholder="Search FAQ">
    </div>
  </div>
</div>

<!-- Accordion -->
<div class="row">
  <div class="col-md-8 mx-auto">
    <div class="accordion accordion-connected accordion-arrow-right" id="accordion-1">
      <div class="card">
        <h5 class="card-title">
          <a data-toggle="collapse" href="#collapse-1-1">About</a>
        </h5>
        <div id="collapse-1-1" class="collapse" data-parent="#accordion-1">
          <h6 class="card-title card-inside">
            <a data-toggle="collapse" href="#collapse-1-1-1">What is you?</a>
          </h6>
          <div id="collapse-1-1-1" class="collapse" data-parent="#accordion-1-1">
            <div class="card-body" style="padding-left: 30px">
              Lorem Ipsum dolor sit amet one.
            </div>
          </div>

          <h6 class="card-title card-inside">
            <a data-toggle="collapse" href="#collapse-1-1-2">What is other you?</a>
          </h6>
          <div id="collapse-1-1-2" class="collapse" data-parent="#accordion-1-1">
            <div class="card-body" style="padding-left: 30px">
              Lorem Ipsum dolor sit amet two.
            </div>
          </div>

          <h6 class="card-title card-inside">
            <a data-toggle="collapse" href="#collapse-1-1-3">What are we??</a>
          </h6>
          <div id="collapse-1-1-3" class="collapse" data-parent="#accordion-1-1">
            <div class="card-body" style="padding-left: 30px">
              Lorem Ipsum dolor sit amet three.
            </div>
          </div>

          <h6 class="card-title card-inside">
            <a data-toggle="collapse" href="#collapse-1-1-4">What we do?</a>
          </h6>
          <div id="collapse-1-1-4" class="collapse" data-parent="#accordion-1-1">
            <div class="card-body" style="padding-left: 30px">
              Lorem Ipsum dolor sit amet four.
            </div>
          </div>

          <h6 class="card-title card-inside">
            <a data-toggle="collapse" href="#collapse-1-1-5">What you need?</a>
          </h6>
          <div id="collapse-1-1-5" class="collapse" data-parent="#accordion-1-1">
            <div class="card-body" style="padding-left: 30px">
              Lorem Ipsum dolor sit amet five.
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <h5 class="card-title" style="font-family: 'Raleway Bold'">
          <a class="collapsed" data-toggle="collapse" href="#collapse-1-2">Details</a>
        </h5>

        <div id="collapse-1-2" class="collapse" data-parent="#accordion-1">
          <h6 class="card-title card-inside">
            <a data-toggle="collapse" href="#collapse-1-2-1">How to do ?</a>
          </h6>
          <div id="collapse-1-2-1" class="collapse" data-parent="#accordion-1-2">
            <div class="card-body" style="padding-left: 30px">
              nostro apeirian cu est one
            </div>
          </div>

          <h6 class="card-title card-inside">
            <a data-toggle="collapse" href="#collapse-1-2-2">How it is?</a>
          </h6>
          <div id="collapse-1-2-2" class="collapse" data-parent="#accordion-1-2">
            <div class="card-body" style="padding-left: 30px">
              nostro apeirian cu est two.
            </div>
          </div>

          <h6 class="card-title card-inside">
            <a data-toggle="collapse" href="#collapse-1-2-3">When to do?</a>
          </h6>
          <div id="collapse-1-2-3" class="collapse" data-parent="#accordion-1-2">
            <div class="card-body" style="padding-left: 30px">
              nostro apeirian cu est three.
            </div>
          </div>

          <h6 class="card-title card-inside">
            <a data-toggle="collapse" href="#collapse-1-2-4">Where to do?</a>
          </h6>
          <div id="collapse-1-2-4" class="collapse" data-parent="#accordion-1-2">
            <div class="card-body" style="padding-left: 30px">
              nostro apeirian cu est four.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：0)

将此行代码添加到以下位置：if（val.length）

$(".accordion .card .child-card").hide().filter(function () {
            return $('.card-title', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1 || $('.card-body', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
}).show();

以及其他内容：

$(".accordion .card .child-card").show;

然后将儿童手风琴与另一个div包裹

<div class="child-card">
 <h6 class="card-title card-inside">
  <a data-toggle="collapse" href="#collapse-1-2-4">Where to do?</a>
 </h6>
 <div id="collapse-1-2-4" class="collapse" data-parent="#accordion-1-2">
  <div class="card-body" style="padding-left: 30px">
  nostro apeirian cu est four.
 </div>
</div>

答案 1 :(得分：0)

我创建了一些用作手风琴的代码，允许用户打开手风琴（和嵌套的手风琴）。

还演示了搜索功能，该功能会自动打开找到该术语的任何手风琴演奏者及其父母。

该代码已完全注释，但是如果不清楚，请告知我。

感谢SLaks的功能，可以找到元素的文本而不包含孩子的文本（link）。

演示

// Add click event to all .accordian-title
$(".accordian-title").click( function() {

  // Check if this is already active
  wasActive = $(this).closest(".accordian-element").hasClass("active");
  
  // Remove all the .active siblings
  $(this).closest(".accordian-wrapper").find(".accordian-element.active").removeClass("active");  
  
  // Activate the clicked .accordian-element if it wasn't active
  if ( wasActive != true ) {
    $(this).closest(".accordian-element").toggleClass("active");
  }
  
});


// Launch search code after any change to input
$("#search").on('change keydown paste input', function() { 

  // Remove search term matching
  $(".accordian-wrapper .found-term").removeClass("found-term");
    
  // Remove all active classes 
  $(".accordian-wrapper .accordian-element.active").removeClass("active");
  
  // Get search term
  searchTerm = $(this).val().toUpperCase();
    
  // Quit if search term is empty
  // IT MIGHT BE A GOOD IDEA TO ADD A MINIMUM 3 CHARACTERS OR SIMILAR
  if ( searchTerm == "" ) {
    $(".accordian-wrapper").removeClass("searched");
    return;
  }
  
  $(".accordian-wrapper").addClass("searched");

  // Check anything within an accordian against the term
  $(".accordian-wrapper *").each( function() {
    
    // Get text only of this element (not children)
    tempText = $(this).immediateText().toUpperCase();

    // Check if search term is present in element
    if  ( tempText.indexOf(searchTerm) >= 0) {
    
      // Add found-term to highlight the element with the search text
      $(this).addClass("found-term");
    
      // Activate all parent accordians to that it is visible
      $(this).parents(".accordian-element").addClass("active");
    
    }

  });

});


// Get text of given element, but not it's children
// Taken from : https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags#answer-32170000
$.fn.immediateText = function() {
    return this.contents().not(this.children()).text();
};
/* Styling to hide and show content on click */

.accordian-content {
  display: none;
}

.accordian-element.active > .accordian-content {
  display: inherit;
}

.accordian-title {
  cursor: pointer;
}


/* Styling for searching content and highlighting it */

.accordian-wrapper.searched .accordian-element {
  display: none;
}

.accordian-wrapper.searched .accordian-element.active {
  display: inherit ;
}

.found-term {
  color: red;
}


/* Just some general styling to make it look nice */

.accordian-wrapper {
  border-left: 5px solid grey;
  border-top: 1px dashed grey;
}

.accordian-element {
  padding: 10px 0px 10px 20px;
  border-bottom: 1px dashed grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Search: <input id="search">

<hr style="margin: 20px 0px;">

<div class="accordian-wrapper">

  <div class="accordian-element">

    <h4 class="accordian-title">Registering</h4>
    <div class="accordian-content">

      <p>This is an explaination text area, because I am not inside the child .accordian-wrapper I am visible when my accoridan-title is clicked!</p>

      <div class="accordian-wrapper">

        <div class="accordian-element">
          <h4 class="accordian-title">Registration Page</h4>
          <div class="accordian-content">
            <p>The URL to the registration page is '/register.html'</p>
          </div>
        </div>
        
         <div class="accordian-element">
          <h4 class="accordian-title">Registration Form</h4>
          <div class="accordian-content">
            <p>The form requires you to fill out your e-mail, name and phone number.</p>
          </div>
        </div>
        
      </div>

    </div>

  </div>

  <div class="accordian-element">

    <h4 class="accordian-title">How do I login?</h4>
    <div class="accordian-content">
      <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
    </div>

  </div>

  <div class="accordian-element">

    <h4 class="accordian-title">Some other title</h4>
    <div class="accordian-content">
      <p>Lorem ipsum</p>
    </div>

  </div>

</div>

相关问题
最新问题