纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

javscp_q   2021-10-12 我要评论
想了解jQuery插件实现手风琴二级菜单的相关内容吗,javscp_q在本文为您仔细讲解jQuery手风琴二级菜单的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:jQuery手风琴菜单,jQuery手风琴,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();
        }
    });
}

实现效果:


相关文章

猜您喜欢

  • Vue响应式原理源码 Vue解读之响应式原理源码剖析

    想了解Vue解读之响应式原理源码剖析的相关内容吗,沐华在本文为您仔细讲解Vue响应式原理源码的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue响应式原理,vue响应式原理简述,vue响应式原理实现,下面大家一起来学习吧。..
  • Java单例模式 Java设计模式之单例模式

    想了解Java设计模式之单例模式的相关内容吗,吾日三省贾斯汀在本文为您仔细讲解Java单例模式的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java设计模式,Java单例模式,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.ebook4download.net 【E4软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式