Bootstrap-simple and practical jQuery accordion plug-in, bootstrap-jquery
Front end
<Html lang = "zh">Jquery. accordion. js Code
/** Jquery. accordion 0.0.1 * Copyright (c) 2015 lengziyu http://lengziyu.com/ * Date: 2015-10-10 */; (function ($) {$. fn. accordion = function (opts) {// default value var defaults = {max: "620px", min: "140px", speed: "1000"} var opts = $. extend (defaults, opts); this. each (function () {var div = $ (this), // $ (". accordion "). accordion (); $ (". accordion ") This element is div ul = div. children (), // The ul element li = ul. children (); // here is the li element // alert(div.html () + "," + ul.html () + "," + li.html (); // trigger Parts ul. find (". active "). hide (); // hide a tag // alert (ul. find (". active "). length);/* fadeOut (): the fade-out animate () method executes the Custom Animation of the CSS attribute set. This method uses the CSS style to change an element from one state to another. The CSS attribute value is gradually changed, so that you can create an animation effect. Only numeric values can be used to create animations (such as "margin: 30px "). The string value cannot be used to create an animation (for example, "background-color: red "). $ (Selector ). animate (styles, speed, easing, callback) $ (selector ). the animate (styles, options) find () method Retrieves all first-level descendants of each element in the current Element Set, searches for the descendant span elements in all paragraphs, and sets the color to Red: $ ("p "). find ("span" ).css ('color', 'red'); siblings () obtain all siblings of each element in the matching set (same level) * // click li to trigger ul. on ("mouseenter", "li", function () {// $ (this) indicates the li element $ (this ). addClass ('active '). animate ({width: opts. max}, opts. speed ). find (""). fadeOut (). parent (). siblings (). removeClass ('active '). animate ({width: opts. min}, opts. speed ). find (""). show () ;}) }}) (jQuery );Some css styles
*{padding: 0;margin: 0;}ul li{list-style: none;float: left;}.accordion{width: 1180px;overflow: hidden;height: 375px;margin:0 auto;}.accordion ul li{background-repeat: no-repeat;float: left;width: 140px;height: 350px;cursor: default;}.accordion ul li.active{width: 620px;}.accordion ul .item1{background-image: url(../img/pic1.jpg);}.accordion ul .item2{background-image: url(../img/pic2.jpg);}.accordion ul .item3{background-image: url(../img/pic3.jpg);}.accordion ul .item4{background-image: url(../img/pic4.jpg);}.accordion ul .item5{background-image: url(../img/pic5.jpg);}.accordion ul li a{display: block;width: 140px;height: 350px;cursor: default;}.accordion ul .item1 a{background-image: url(../img/pics1.jpg);}.accordion ul .item2 a{background-image: url(../img/pics2.jpg);}.accordion ul .item3 a{background-image: url(../img/pics3.jpg);}.accordion ul .item4 a{background-image: url(../img/pics4.jpg);}.accordion ul .item5 a{background-image: url(../img/pics5.jpg);}
The referenced demo address:
Http://www.htmleaf.com/Demo/201510122660.html
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
