jQuery插件实现手风琴二级菜单

 更新时间:2021年10月12日 10:46:40   作者:javscp_q  
这篇文章主要为大家详细介绍了jQuery插件实现手风琴二级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例制作了一个用jQuery插件形式实现的手风琴二级菜单,供大家参考,具体内容如下

HTML5结构要求:

<div id="accordion">
    <div>
        <p>一级菜单</p>
        <div>
            <p>二级菜单</p>
            <p>二级菜单</p>
            <p>二级菜单</p>
        </div>
    </div>
    <div>
        <p>一级菜单</p>
        <div>
            <p>二级菜单</p>
            <p>二级菜单</p>
            <p>二级菜单</p>
        </div>
    </div>
    <div>
        <p>一级菜单</p>
        <div>
            <p>二级菜单</p>
            <p>二级菜单</p>
            <p>二级菜单</p>
        </div>
    </div>
</div>

在body末尾使用jQuery找到父标签并调用插件函数

<script type="text/javascript">
    $("#accordion").accordion();
</script>

导入accordion-css.css文件与accordion-jQuery.js文件

accordion-css.css:

*{padding: 0;margin: 0;}
#accordion{
    width: 200px;
    margin: 0 auto;
    border: 1px solid whitesmoke;
}
#accordion .list1>p{
    padding: 10px 15px;
    font: 20px "微软雅黑";
    font-weight: bold;
    background: whitesmoke;
    cursor: pointer;
}
#accordion .list1>p:hover{
    background: lightskyblue;
}
#accordion .list2>p{
    padding: 10px 25px;
    font: 15px "微软雅黑";
    cursor: pointer;
}
#accordion .list2>p:hover{
    background: lightskyblue;
}
#accordion .list2{
    display: none;
}

accordion-jQuery.js:

jQuery.fn.accordion = function(){
    var $accordion = $(this);
    $accordion.children().addClass("list1");
    $accordion.children().children("div").addClass("list2");
    $accordion.on("click",".list1>p",function(){
        if($(this).next(".list2").is(":visible")){
            $(this).next(".list2").slideUp();
        }else{
            $(this).next(".list2").slideDown();
            $(this).parent().siblings(".list1").children(".list2").slideUp();
        }
    });
}

实现效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • jQuery实现的背景颜色渐变动画效果示例

    jQuery实现的背景颜色渐变动画效果示例

    这篇文章主要介绍了jQuery实现的背景颜色渐变动画效果,涉及事件响应及页面元素属性结合时间动态变换的相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • 详解jQuery设置内容和属性

    详解jQuery设置内容和属性

    这篇文章主要介绍了jQuery设置内容和属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Jquery表单验证失败后不提交的解决方法

    Jquery表单验证失败后不提交的解决方法

    很多人可能都会遇到在调试的时候用了return了false,可为什么还会提交呢?这个问题我最近也碰到了,尝试了多次也没有用,后来终于发现了其中的问题,下面分享处理给大家,让同样遇到这个问题的朋友们能够看看,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • jquery 删除cookie失效的解决方法

    jquery 删除cookie失效的解决方法

    本文是对jquery 删除cookie失效的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • Jquery 动态生成表格示例代码

    Jquery 动态生成表格示例代码

    在某些特殊的情况下是需要动态生成表格的,下面为大家详细介绍下使用jquery是如何做到的,感兴趣的朋友不要错过
    2013-12-12
  • JQuery学习总结【一】

    JQuery学习总结【一】

    本文主要介绍了JQuery的基本知识,如:jquery内置函数,JQuery对象,Dom对象,jquery选择器,jquery的迭代,jquery的节点遍历等等,有助于对JQuery基本知识的学习与巩固。需要的朋友可以参考下
    2016-12-12
  • 20款效果非常棒的 jQuery 插件小结分享

    20款效果非常棒的 jQuery 插件小结分享

    这篇文章向大家推荐20款效果非常棒的 jQuery 插件。jQuery 是一个非常优秀的JavaScript库,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,同时也改变了很多人编写 JavaScript 代码的方式
    2011-11-11
  • jQuery常见动画效果实现介绍

    jQuery常见动画效果实现介绍

    这篇文章主要为大家介绍了jQuery编程动画基本实现方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • jQuery实现二维码扫描功能

    jQuery实现二维码扫描功能

    这篇文章主要 介绍了jQuery利用jquery.qrcode.min.js插件实现二维码扫描功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jq实现酷炫的鼠标经过图片翻滚效果

    jq实现酷炫的鼠标经过图片翻滚效果

    一个酷炫的图片翻滚效果要实现这个效果并不难,只要思路对了,一切都好办,下面有个不错的示例,大家可以参考下
    2014-03-03

最新评论