最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

基于JQuery的简单实现折叠菜单代码_jquery

来源:动视网 责编:小采 时间:2020-11-27 20:55:04
文档

基于JQuery的简单实现折叠菜单代码_jquery

基于JQuery的简单实现折叠菜单代码_jquery:菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表。 HTML代码如下: 代码如下: 服务管理 等待提交 等待发布 正式项目 点此新增 更新流程 后台搜索 更新流程 FAQ管理 等待提交 等待发布 正式项目 点此
推荐度:
导读基于JQuery的简单实现折叠菜单代码_jquery:菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表。 HTML代码如下: 代码如下: 服务管理 等待提交 等待发布 正式项目 点此新增 更新流程 后台搜索 更新流程 FAQ管理 等待提交 等待发布 正式项目 点此
 菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表。
HTML代码如下:
代码如下:








服务管理


  • 等待提交

  • 等待发布

  • 正式项目

  • 点此新增



  • 更新流程


  • 后台搜索

  • 更新流程



  • FAQ管理


  • 等待提交

  • 等待发布

  • 正式项目

  • 点此新增



  • 下载管理


  • 等待提交

  • 等待发布

  • 正式项目

  • 点此新增



  • 返回首页



    其中JQUERY脚本,只需简单的几行便可以实现想要的效果。具体代码如下所示:
    代码如下:

    $(document).ready(function () {
    //将二级菜单设置为不可见
    $(".FAQlist").css("display", "none");
    //单击一级菜单触发的事件
    $(".bartitleFAQ").click(function () {
    $(".FAQlist").css("display", "none");//将二级菜单全部设置为不可见
    $(this).next(".FAQlist").css("display", "block");//当前一级菜单的二级菜单设置为可见
    })
    })

    文档

    基于JQuery的简单实现折叠菜单代码_jquery

    基于JQuery的简单实现折叠菜单代码_jquery:菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表。 HTML代码如下: 代码如下: 服务管理 等待提交 等待发布 正式项目 点此新增 更新流程 后台搜索 更新流程 FAQ管理 等待提交 等待发布 正式项目 点此
    推荐度:
    标签: 菜单 折叠 简单
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top