Question

我正在尝试显示一个包含一组类别和子类别的垂直菜单（导航菜单）。

我可以从数据库中获取数据，但是未能将子类别完全放在它的父元素下。

我可以显示类别及其子类别。但我只需要在鼠标悬停或点击类别时显示子类别。
这是我想做的快照

enter image description here

电子产品 - ＆gt;当点击电子产品时，它必须显示电子产品类别

下的列表

汽车没有子类别*并非所有类别都有子类别。

这是我的代码：的模型：

    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>

非常感谢

Answer 1

首先，在一个带有静态ID的循环中创建div将无效，因为您最终会得到具有相同ID的多个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");
  });
});

Answer 2

我认为您的代码需要进行2次更改。

在模型中用'$ result [$ i] ['cat_id']'替换'$ i'

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

＆GT;

在视图文件[$ b]中不需要您可以使用以下代码直接输出：

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

希望这会对你有所帮助...... :)

如何使用codeigniter中从数据库返回的数据显示类别和子类别菜单样式的列表

2 个答案: