Jquery控制点击时一、二级菜单自由隐藏与出现

最新推荐文章于 2022-03-20 11:57:01 发布

Monkey_Online

最新推荐文章于 2022-03-20 11:57:01 发布

阅读量1w

点赞数 7

分类专栏： JavaScript PHP 文章标签： JavaScript jQuery CSS

本文链接：https://blog.csdn.net/houqd2012/article/details/9262993

版权

本文详细介绍了如何使用Jquery控制一、二级菜单的隐藏与显示。通过CSS设置初始状态，结合Jquery的toggleClass、next、toggle、index、each和css等方法，实现点击一级标题时二级菜单的动态切换。最后展示了完整实现效果，并鼓励持续学习。

摘要由CSDN通过智能技术生成

一、基本HTML和CSS

HTML中产生一、二级导航的代码：

　　{loop  $nav  $key  $value}
　　     <div class=”u_con”>             
         <span class=” xg_bt active ”>$value[0]</span>
　　         <ul class=”u_con_list”>
　　             {loop  $sub_nav_list[$key] $k $v}
　　                  <li class=”u_con_item”>
　　                      <a href =”index.php?&view={$key}”>$v[0]</a>
　　                  </li>
　　             {/loop}
　　         </ul>
　　     </div>
　　{/loop}

关键CSS代码：

.xg_bt{
     display:block;
     background:url(lis_03.png) no-repeat 70px 4px;
     font-size:12px;color:#666;
     font-weight:bold;
     padding-left:14px;
     margin-bottom:6px; 
     cursor:pointer;
}

.active{
     background:url(lis_01.png) no-repeat 70px 4px;
}