Summary of jQuery plug-ins commonly used in website development (11) folding plug-in Akordeon

You can hide menus without using plug-ins. If jquery is used, the implementation is relatively simple. We only need to define the style of the collapsed menu, and then use the fade-in jquery. If we write the folding menu by ourselves, we can easily use our own style. If we use the jquery plug-in, we need to define the style according to the plug-in design. In fact, we need to modify the default Akordeon style of the plug-in. Now that the jquery plug-in is written, the collapse plug-in Akordeon is included. The Akordeon plugin defines many fixed styles, such as the height and width of the folding menu. During the test, I simply modified the default style of the plug-in. The custom style is still overwritten. In fact, if you need this plug-in during project development, you can modify the style that comes with the Akordeon plug-in.

I. Functions of the Akordeon plug-in

The content is displayed in folding mode, not necessarily for navigation. The non-navigation function is demonstrated in the official demo. In this example, the navigation function is demonstrated. However, official instances may not be suitable for actual project applications.

Ii. Akordeon official address

Bytes.

Iii. How to Use Akordeon

1. File Reference

2. style used. There are a lot of style codes, so I will not post them here. If you are interested, you can view the test file ". The modified style is as follows:

3. js Code. Js Code is very simple. The attributes used are official ones. For details, see the official documentation. The code used in this example is:

$ (Document). ready ('# buttons'). akordeon ({buttons :});

4.html code. The Akordeon plug-in mainly uses ul to implement menu folding. You can see the test file ".

Test File: Collapse plug-in Akordeon