简洁实用的BootStrap jQuery手风琴插件

时间：2021-05-18

前端

<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简洁实用的jQuery手风琴插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title><link rel="stylesheet" type="text/css" href="css/normalize.css" /><link rel="stylesheet" type="text/css" href="css/default.css"><link rel="stylesheet" type="text/css" href="css/jquery.accordion.css"><!--[if IE]><script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script><![endif]--></head><body><article class="htmleaf-container"><header class="htmleaf-header"><h1>简洁实用的jQuery手风琴插件 <span>A jQuery accordion plugin</span></h1><div class="htmleaf-links"><a class="htmleaf-icon icon-htmleaf-home-outline" href="http://; (function ($) {$.fn.accordion = function (opts) {//默认值var defaults = {max: "620px",min: "140px",speed: "1000"}var opts = $.extend(defaults, opts);this.each(function () {var div = $(this),//$(".accordion").accordion(); 表示$(".accordion")这个元素 这里是divul = div.children(),//这里表示ul元素li = ul.children();//这里是li元素//alert(div.html() + "," + ul.html() + "," + li.html());//触发事件ul.find(".active a").hide();//隐藏a标签//alert(ul.find(".active a").length);//鼠标进入li触发ul.on("mouseenter", "li", function () {//$(this)表示li元素$(this).addClass('active').animate({ width: opts.max }, opts.speed).find("a").fadeOut().parent().siblings().removeClass('active').animate({ width: opts.min }, opts.speed).find("a").show();})})}})(jQuery);

部分css样式

*{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);}

以上所述是小编给大家介绍的简洁实用的BootStrap jQuery手风琴插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章