Compile the menu folding of the jQuery plug-in by yourself and compile the jquery plug-in folding
The menu folding function is very simple. Many people have written it because it is used too frequently in projects. There are just a few lines of code. I just want to package it into a plug-in.
The Html code is as follows:
<Div class = "box"> <p> menu 1 </p> <ul> <li> <a> 1111 </a> </li> <> 1111 </a> </li> <a> 1111 </a> </li> </ul> <p> menu 2 </p> <ul> <li> <a> 2222 </a> </li> <a> 2222 </a> </li> <a> 2222 </ a> </li> </ul> <p> menu 3 </p> <ul> <li> <a> 3333 </a> </li> <li> <a> 3333 </a> </li> <a> 3333 </a> </li> </ul> </div>
The plugin implementation code is as follows:
(Function ($) {$. fn. fold = function (options) {// The default parameter sets var settings = {speed: 300 // The folding speed (the larger the value, the slower the value )} // if (options) $. extend (settings, options); // bind a click event for each p element $ ("> p", this ). each (function () {$ (this ). bind ("click", function () {$ (this ). next ("ul "). slideToggle (settings. speed) ;}); // The first extension by default. Other folds $ ("> ul", this ). hide (). first (). show (); // follow the chained principle return this. each (function () {}) ;}) (jQuery );
I will not explain it here, and the comments are clearly written.
The DEMO is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <title> </title> <style type =" text/css "> * {padding: 0; margin: 0;} ul, ul li {list-style: none ;}. box {width: 250px; margin: 50px auto; border: 1px solid gray ;}. box p {background-color: Green; color: white; cursor: pointer; font-weight: bold; line-height: 40px; padding-left: 15px ;} </style>
Slice:
A left-side menu in the background is used to create code, and Jquery is used for folding and expansion. In actual work, JQUEY is usually used?
I can tell you the idea. If there are three menus, we will use three divs and the outermost layer will set a large div to fix them. Clicking to expand will actually change the height of one or two divs, the premise is that the positioning method is well done. Do not absolute positioning. It is difficult to control. Use jquery to respond to click events and use the jquery animate function to create an animation. My computer has just been reinstalled and dreamweaver cannot be installed for you. jquery is very quick to get started.
How does jquery fold the menu?
Here is a general idea:
In the method,
Step 1: hide all data using the hide () method
Step 2: Use the show method to trigger the selected mouse event.
Give you a reference site: www.hz-hospital.com/
There are eight centers on the right of the website.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
