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:
|
<<: Notes on using the blockquote tag
>>: Universal solution for MySQL failure to start under Windows system
1. Install the virtual machine hyper-v that comes...
Table of contents 1 Use of v-if and v-show 2. Dif...
Table of contents 1. Introduction 2. About vue-si...
Basic concepts of consul Server mode and client m...
Input subsystem framework The linux input subsyst...
In the WeChat applet project, the development mod...
Overview Indexing is a skill that must be mastere...
Install Jenkins via Yum 1. Installation # yum sou...
It is difficult to find good image material websi...
Preface This article will share some docker-compo...
As shown below: select name from mysql.proc where...
Table of contents Math Objects Common properties ...
Table of contents 1. Understanding Databases 1.1 ...
Table of contents 1. Introduction 2. Ideas Two wa...
Table of contents Preface 1. Routing lazy loading...