jQuery plugin to implement accordion secondary menu

jQuery plugin to implement accordion secondary menu

This article uses a jQuery plug-in to create an accordion secondary menu for your reference. The specific content is as follows

HTML5 structure requirements:

<div id="accordion">
    <div>
        <p>First level menu</p>
        <div>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
        </div>
    </div>
    <div>
        <p>First level menu</p>
        <div>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
        </div>
    </div>
    <div>
        <p>First level menu</p>
        <div>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
            <p>Secondary menu</p>
        </div>
    </div>
</div>

Use jQuery at the end of the body to find the parent tag and call the plugin function

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

Import the accordion-css.css file and the accordion-jQuery.js file

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 "Microsoft YaHei";
    font-weight: bold;
    background: whitesmoke;
    cursor: pointer;
}
#accordion .list1>p:hover{
    background: lightskyblue;
}
#accordion .list2>p{
    padding: 10px 25px;
    font: 15px "Microsoft YaHei";
    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();
        }
    });
}

Result:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • jQuery Easyui usage (I) foldable panel layout accordion menu
  • jQuery makes an awesome accordion menu
  • Implementing accordion menu based on Jquery code
  • jQuery multi-level accordion menu example explanation
  • Expand and collapse the navigation menu in accordion mode based on jQuery
  • A sentence based on JQuery to create an accordion menu
  • jQuery implements simple accordion menu effect example
  • jQuery implements accordion effect of drop-down menu
  • Based on jQuery to achieve accordion menu, hierarchical menu, top menu, seamless scrolling effect
  • Jquery vertical multi-level accordion menu with source code download

<<:  Notes on using the blockquote tag

>>:  Universal solution for MySQL failure to start under Windows system

Recommend

Implementation of code optimization for Vue2.x project performance optimization

Table of contents 1 Use of v-if and v-show 2. Dif...

Example of using docker compose to build a consul cluster environment

Basic concepts of consul Server mode and client m...

Analysis of the Linux input subsystem framework principle

Input subsystem framework The linux input subsyst...

WeChat applet canvas implements signature function

In the WeChat applet project, the development mod...

Mysql experiment: using explain to analyze the trend of indexes

Overview Indexing is a skill that must be mastere...

Detailed explanation of the installation process of Jenkins on CentOS 7

Install Jenkins via Yum 1. Installation # yum sou...

The best 9 foreign free picture material websites

It is difficult to find good image material websi...

Detailed explanation of software configuration using docker-compose in linux

Preface This article will share some docker-compo...

Introduction to query commands for MySQL stored procedures

As shown below: select name from mysql.proc where...

Detailed explanation of JavaScript's built-in objects Math and strings

Table of contents Math Objects Common properties ...

Basic knowledge of MySQL database

Table of contents 1. Understanding Databases 1.1 ...

Vue implements upload component

Table of contents 1. Introduction 2. Ideas Two wa...

Essential bonus items for optimizing and packaging the front end of Vue projects

Table of contents Preface 1. Routing lazy loading...