1

一連のカテゴリとサブカテゴリを持つ垂直メニュー (ナビゲーション メニュー) を表示しようとしています。

データベースからデータを取得できますが、サブカテゴリをその親の下に正確に配置できません。

カテゴリとそのサブカテゴリを表示できます。しかし、マウスをホバーするかカテゴリをクリックしたときにのみサブカテゴリを表示する必要があります。
これが私がやりたかったスナップショットです

ここに画像の説明を入力

電子機器--> 電子機器をクリックすると、電子機器カテゴリの下にリストが表示される必要があります

自動車にはサブカテゴリーはありません ※すべてのカテゴリーにサブカテゴリーがあるわけではありません。

ここに私のコードがあります: モデル:

    function getCategories()
{
    $this->db->select();
    $query=$this->db->get('ci_tbl_categories');
        if ($query->num_rows() > 0)
        {
            $result =$query->result_array();

            for($i=0;$i<count($result);$i++)
            {
                $query1=$this->db->query("select * from ci_tbl_subcategory where cat_id='".$result[$i]['cat_id']."'");
                if($query1->num_rows() > 0)
                {
                $result[$i]['sub']=$query1->result_array();
                }
                else
                {
                $result[$i]['sub']=array();
                }
            }

            //print_r($result);
            return $result;
        }
        else
        {
            return $query->result_array();
        }

}

コントローラー：

            function categories()
    {
        $this->load->model('categories');

        $result['res'] = $this->categories->getCategories();

        //print_r($result['res']);
        $this->load->view('category',$result);

    }

ビュー:

<script type="text/javascript"> 
$(document).ready(function(){

  $("#main").click(function(){
    $("#sub").slideToggle("slow");
  // alert("clicked");

  });
});
</script>


     <body>
<div id="category" style="border-radius:5px; width:200px;background-color:#d2dbde; ">
<?php //echo count($res)."<br/>";?>
<div id="nav_head">Categories</div>

<?php for($a=0;$a<count($res);$a++)
{
//echo $row['cat_name']['subcat_name']."<br/>";
?><div id="main"><?php echo $res[$a]['cat_name'];?></div>
<?php
if(count($res[$a]['sub']) > 0)
{
?><div id="sub">
 <?php for($b=0;$b<count($res[$a]['sub']);$b++) {?>

<div id="subcat"><?php echo $res[$a]['sub'][$b]['subcat_name'];?></div>

<?php }?>
</div>
<?php }} ?>
</div>
</body>

どうもありがとう

4

2 に答える 2

2

まず第一に、静的 ID を持つループで を作成すると、同じ ID をdiv持つ複数の が作成されるため、機能しません。divクラス名を使用してみてください。

<div class="main">

<div class="sub">

次に、クリック/マウスオーバーを検出し、表示/非表示にできるはずですsub

$(document).ready(function(){
  $(".main").click(function(){
    $(this).next('.sub').slideToggle("slow");
  });

  $(".main").mouseover(function(){
    $(this).next(".sub").slideToggle("slow");
  }).mouseout(function(){
    $(this).next(".sub").slideToggle("slow");
  });
});
于 2013-01-10T20:18:56.607 に答える
1

あなたのコードには2つの変更が必要だと思います。

  1. モデルでは、「$i」を「$result[$i]['cat_id']」に置き換えます

    <?php
for($i=0;$i<count($result);$i++){
                $query1=$this->db->query("select * from ci_tbl_subcategory 
                where cat_id='".$result[$i]['cat_id']."'");
                if($query1->num_rows() > 0)
                {
                $result[$result[$result[$i]['cat_id']]]['sub']=$query1->result_array();
                }
                else
                {
                $result[$result[$result[$i]['cat_id']]]['sub']=array();
                }
            }

    ?>

  2. ビュー ファイル [$b] は必要ありません。次のコードを使用して直接出力を取得できます。

    <?php echo $res[$a]['sub']['subcat_name'];?>

これがあなたを助けることを願っています... :)

于 2013-01-10T05:36:43.103 に答える