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

首先，div使用静态 id 在循环中创建 ' 将不起作用，因为您最终会得到多个div具有相同 id 的 '。尝试使用类名。

<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 回答