网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款可配置的、可定制的、jQuery手风琴菜单折叠插件。
功能:
允许在页面加载时打开第一个手风琴面板。
可配置打开/关闭动画。
打开时自动将页面滚动到当前手风琴面板。
使用方法:
1. 添加手风琴所需的HTML结构。
.my-accordion: accordion wrapper
.accrdion-entry: accordion header
.accrdion-content: accordion content
<div class="my-accordion">
<article class="accrdion-entry">
<header class="accrdion-header">
Accordion Header 1
</header>
<div class="accrdion-content">
<p>Accordion Content 1</p>
</div>
</article>
<article class="accrdion-entry">
<header class="accrdion-header">
Accordion Header 2
</header>
<div class="accrdion-content">
<p>Accordion Content 2</p>
</div>
</article>
<article class="accrdion-entry">
<header class="accrdion-header">
Accordion Header 3
</header>
<div class="accrdion-content">
<p>Accordion Content 3</p>
</div>
</article>
...
</div>
2. 下载插件,在html页面中加载jQuery库和accrdion.js插件文件。
<script src="jquery.min.js"></script>
<script src="accrdion.js"></script>
3. 插件初始化。
$(function(){
$('.my-accordion').accrdion();
});
4.插件没有提供默认的CSS样式。因此,可以使用CSS定制手风琴的外观。
my-accrdion {
background-color: #fafafa;
}
.accrdion-header {
background-color: #222;
border-bottom: 1px solid #fafafa;
color: #fff;
cursor: pointer;
padding: .5rem 1rem;
font-size: 1.5rem;
}
.accrdion-content {
padding: .5rem 1rem;
}
5.确定是否在页面加载时打开第一个项目。默认值:true。
$('.my-accordion').accrdion({
openFirstByDefault: false
});
6.确定是否在打开/关闭当前项时关闭所有其他项。默认值:“single”。
$('.my-accordion').accrdion({
displayStyle: 'any'
});
7.自定义动画速度(毫秒)。默认值:400。
$('.my-accordion').accrdion({
toggleSpeed: 500
});
8.确定是否滚动到当前项的顶部。默认值:true。
$('.my-accordion').accrdion({
scrollToActive: true,
scrollSpeed: 500,
});
转载请注明来源:jQuery手风琴折叠菜单特效代码(Accrdion.js)
本文永久链接地址:https://www.moyouyouw.cn/code/728.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论