javascript - jquery显示/隐藏每个类别

Question

我只是想按产品类别列出产品列表侧边栏。我想当我点击一个类别时，它只显示这个类别的产品和另一个隐藏。

我的jQuery代码

  


    $(document).ready(function () {
       $(".show_hide").show();
       $(".slidingDiv").hide();

       $('.show_hide').click(function () {
       $(".slidingDiv").slideToggle();
     });
   });


   

我的PHP代码

<? foreach($test as $t): ?>
            <big><a href='javascript:void(0);' class='show_hide'><?php $t['category']; ?></a></big>
        <?
        $cat_id=$t['category_id'];
            $query1=$this->db->query("select * from product where category_id='$cat_id'");
            $test1=$query1->result_array();
        ?>
        <div class='slidingDiv'>
                <? foreach($test1 as $t1):?>
                    <a href='<?php print base_url('index.php/admin_panel/product/'.$t1['product_id'])?>'><?php print $t1['product_name']; ?></a><br/>
                <?php   endforeach; ?>
        </div>
        <?php   endforeach; ?>

我的问题是当我单击一个类别时，每个类别都会显示所有产品。

如何在foreach循环中显示每个类别的产品？

Answer 1

也许你可以看看 jQuery UI，特别是手风琴：

jQueryUI 手风琴

Answer 2

我认为您需要执行以下操作：

$(document).ready(function () {
   $(".show_hide").show();
   $(".slidingDiv").hide();

   $('.show_hide').click(function () {
      $(this).parent().next().slideToggle();
   });
});

在这种情况下，您只调用slideToggle一个元素。在您的情况下，您将其称为slidingDiv该类的所有元素。

Answer 3

尝试：

$(".show_hide").on('click', function(){
    $(this).find('.slidingDiv').slideToggle();
})