Question

我为FAQ页面创建了一个搜索栏，我正在使用bootstrap的标签。单击按钮时，会显示选项卡的内容 - 但在搜索内容时，它不会显示。我试图通过匹配div的id然后将div的显示从none设置为inline-block（以使其可见）来获取内容，但它会导致其他问题....

  $('#faq_search').on('keyup', function() {

    var filter = $(this).val();
    if (filter.length > 2) {

      $(".faq_cont_right ul li").each(function() {
        $(this).removeClass('foo');
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
          $(this).show();

        } else {

          $(this).show();
          $(this).addClass('foo');

        }
      });

    } else {
      $(".faq_cont_right ul li").each(function() {
        $(this).removeClass('foo');
      });
    }

  });

这是我的plunker

Answer 1

更改你的srcipt.js ....它会起作用：

    $(document).ready(function(){
       $('#faq_search').on('keyup',function(){

           var filter = $(this).val();
           if (filter.length > 2) {

           // Loop through the comment list
           $(".faq_cont_right ul li").each(function(){
               $(this).removeClass('foo');
               // If the list item does not contain the text phrase fade it out
               if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                   //$(this).fadeOut();
                   $(this).show();
                   // Show the list item if the phrase matches and increase the count by 1
               } else {

                   $(this).show();
                   $(this).addClass('foo');

               }
           });
            $(".tab-content>.active").each(function(){
               $(this).removeClass('foo');
               // If the list item does not contain the text phrase fade it out
               if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                   //$(this).fadeOut();
                   $(this).show();
                   // Show the list item if the phrase matches and increase the count by 1
               } else {

                   $(this).show();
                   $(this).addClass('foo');

               }
           });


} else{
   $(".faq_cont_right ul li").each(function(){
  $(this).removeClass('foo');
   });
    $(".tab-content>.active").each(function(){
  $(this).removeClass('foo');
   });
}


       });
    });

Answer 2

得到它....只需要在找到匹配结果时触发click事件.... $（document）.ready（function（）{ $（'＃faq_search'）。on（'keyup'，function（）{

   var filter = $(this).val();
   if (filter.length > 2) {

     // Loop through the comment list
     $(".faq_cont_right ul li").each(function() {
       $(this).removeClass('foo');
       // If the list item does not contain the text phrase fade it out
       if ($(this).text().search(new RegExp(filter, "i")) < 0) {
         //$(this).fadeOut();
         $(this).show();
         // Show the list item if the phrase matches and increase the count by 1
       } else {

         $(this).show();
         $(this).addClass('foo').trigger('click'); 

       }
     });
     $(".tab-content>.active").each(function() {
       $(this).removeClass('foo');
       // If the list item does not contain the text phrase fade it out
       if ($(this).text().search(new RegExp(filter, "i")) < 0) {
         //$(this).fadeOut();
         $(this).show();
         // Show the list item if the phrase matches and increase the count by 1
       } else {

         $(this).show();
         $(this).addClass('foo');

       }
     });


   } else {
     $(".faq_cont_right ul li").each(function() {
       $(this).removeClass('foo');
     });
     $(".tab-content>.active").each(function() {
       $(this).removeClass('foo');
     });
   }


 });

}）;

如何获取引导选项卡的内容

2 个答案: