Jquery手风琴过滤器

2023年2月7日 205次阅读

我想在
jquery中过滤基于输入文本的手风琴上的标题,你能不能提一下如何实现这一点,我尝试使用表但手风琴效果存在于行上,虽然根据输入进行过滤.

<div id="accordion">
   <forEach var="group" items="${groups}">
      <h3>
         <table class="order-table">
            <tr style="border-top: 0px;">
               <td>${group.seriesName}</td>
            </tr>
         </table>
      </h3>`enter code here`
      <div>Input text on expand</div>
   </forEach>
</div>

`

最佳答案 在这里解决方案,

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script>$(function() {
             $( "#accordion" ).accordion({
                active: false,
                collapsible: true
            });
 });</script>

<script>
$(document).ready(function(){
  $("input").keyup(function(){
   var bla = $('#txt_name').val();
   $( "h3" ).each(function(){
        var htxt=$(this).text();
        alert(htxt);
        if (htxt.indexOf(bla) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
  });
});

</script>
</head>
<body>
<input type="text" id="txt_name"/>
<div id="accordion">
  <h3>Hi1</h3>
  <div>hello</div>
  <h3>Hi2</h3>
  <div>hello</div>
  <h3>Hi3</h3>
  <div>hello</div>

</div>
</body>
</html>
点赞