Question

我想在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>

`

Answer 1

这是解决方案，

    <!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>

Answer 2

查看演示here和here

<body>
<div id="container" >
<ul id="list">

<li><a href="#" id="show">List 1</a>
<div class="slippy" style="display:block; display:none;">
    <a href="#">List 1 Entry 1</a><br/>
    <a href="#">List 1 Entry 2</a><br/>
    <a href="#">List 1 Entry 3</a><br/>
    <a href="#">List 1 Entry 4</a><br/>
    <a href="#">List 1 Entry 5</a><br/>
    <a href="#">ALL</a><br/>
</div>
</li><br/><br/>

<li><a href="#" id="show">List 2</a>
<div class="slippy" style="display:block; display:none;">
    <a href="#">List 2 Entry 1</a><br/>
    <a href="#">List 2 Entry 2</a><br/>
    <a href="#">List 2 Entry 3</a><br/>
    <a href="#">List 2 Entry 4</a><br/>
    <a href="#">List 2 Entry 5</a><br/>
</div>
</li><br/><br/>

<li><a href="#" id="show">List 3</a>
<div class="slippy" style="display:block; display:none;">
    <a href="#">List 3 Entry 1</a><br/>
    <a href="#">List 3 Entry 2</a><br/>
    <a href="#">List 3 Entry 3</a><br/>
    <a href="#">List 3 Entry 4</a><br/>
    <a href="#">List 3 Entry 5</a><br/>
    <a href="#">ALL</a><br/>
</div>
</li><br/><br/>

</ul></div>
</body>

详情见API documentation

Answer 3

替代解决方案：

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
  $("#menu_filter_txt").keyup(function(){
   var bla = $('#menu_filter_txt').val().toString().toLowerCase();

   if (jQuery.trim(bla)=='') {
     $("#accordion div.ui-accordion-content").attr('filter-key','').hide(); 
     return true;
   }
   $( "#accordion ul li" ).each(function(){
        var htxt=$(this).text().toString().toLowerCase();   
      var ulIndex=$(this).parent().index('ul');
        if (htxt.indexOf(bla) > -1) {
            $(this).show();
            $('#ui-accordion-sis_accordion-panel-'+ulIndex).attr('filter-key',bla).show();
        } else {
            $(this).hide();
            if ($('#ui-accordion-sis_accordion-panel-'+ulIndex).attr('filter-key')!=bla)
            $('#ui-accordion-sis_accordion-panel-'+ulIndex).hide();
        }
    });
  });
});

</script>

Jquery手风琴过滤器

3 个答案: