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 Accordion

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();
})

jquery显示/隐藏每个类别

3 个答案: