网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款基于jquery+bootstrap4实现的折叠菜单组件,可以使用键盘在accordion面板和accordion内容之间切换。
1. 在html页面中加载bootstrap4框架和jquery库。
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
2. 创建折叠菜单结构代码。
<div class="comp-information">
<div class="information__accordion js-information" id="informationAccordion">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<!-- NOTE: For change the arrow position toggle class .collapsed ( for collapsed add class .collapsed | for expanded remove class .collapsed ) -->
<button type="button" class="btn" data-toggle="collapse" data-target="#collapse-details" aria-expanded="true" aria-controls="collapse-details" title="帝国模板之家">
<span class="js-information_tooltip" data-toggle="tooltip" data-placement="bottom">帝国模板之家</span>
</button>
</h5>
</div>
<!-- NOTE: For show the collapses content add class .show -->
<div class="collapse" id="collapse-details" data-parent="">
<div class="card-body">
Accordion Content Here
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<!-- NOTE: For change the arrow position toggle class .collapsed ( for collapsed add class .collapsed | for expanded remove class .collapsed ) -->
<button type="button" class="btn js-information_tooltip collapsed" data-toggle="collapse" data-target="#accessRights-collapse" aria-expanded="false" aria-controls="accessRights-collapse" title="www.moyouyouw.cn">
<span class="js-information_tooltip" data-toggle="tooltip" data-placement="bottom">www.moyouyouw.cn</span>
</button>
</h5>
</div>
<!-- NOTE: For show the collapses content add class .show -->
<div class="collapse" id="accessRights-collapse" data-parent="">
<div class="card-body">
Accordion Content Here
</div>
</div>
</div>
</div>
</div>
3. 折叠菜单样式代码。
.comp-information {
width: 100%;
}
.comp-information a {
color: #007fad;
text-decoration: underline;
}
.comp-information a:hover, .comp-information a:focus {
color: #006589;
}
.comp-information .information__accordion .card {
border-radius: 4px;
margin-bottom: 20px;
}
.comp-information .information__accordion .card p {
margin-bottom: 0;
}
.comp-information .information__accordion .card p + p {
margin-top: 1rem;
}
.comp-information .information__accordion .card-header {
padding: 0;
border-radius: 0;
}
.comp-information .information__accordion .card-header .btn {
position: relative;
width: 100%;
text-align: inherit;
-webkit-box-pack: start;
justify-content: flex-start;
font-size: 22px;
padding-top: 9px;
padding-bottom: 9px;
padding-right: 55px;
background-color: #f3f3f3;
border: none;
}
.comp-information .information__accordion .card-header .btn::after {
position: absolute;
content: "";
top: 0;
right: 16px;
width: 22px;
height: 100%;
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="15"> <path fill="rgb(0, 127, 173)" fill-rule="evenodd" d="M12-.001l12 11.797-3.259 3.203L12 6.406l-8.741 8.593L0 11.796 12-.001z"/> </svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
height: 26px;
top: 27%;
}
.comp-information .information__accordion .card-header .btn.collapsed:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
@media (max-width: 767.98px) {
.comp-information .information__accordion .card-header .btn, .comp-information .information__accordion .card-body {
padding-left: 15px;
padding-right: 15px;
}
}
@media (min-width: 768px) {
.comp-information .information__accordion .card-header .btn, .comp-information .information__accordion .card-body {
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 992px) {
.comp-information .information__accordion .card-header .btn, .comp-information .information__accordion .card-body {
padding-left: 25px;
padding-right: 25px;
}
}
.comp-information .information__accordion .card-body {
padding-top: 20px;
padding-bottom: 20px;
background-color: #fbfbfb;
}
@media (max-width: 767.98px) {
.comp-information .information__accordion .card-body {
padding-left: 15px;
padding-right: 15px;
}
}
@media (min-width: 768px) {
.comp-information .information__accordion .card-body {
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 992px) {
.comp-information .information__accordion .card-body {
padding-left: 25px;
padding-right: 25px;
}
}
4. 添加键盘控制菜单方法。
// Accessible - Define values for keycodes
function keyCodes() {
this.tab = 9;
this.untab = 16;
this.enter = 13;
this.escape = 27;
this.space = 32;
this.end = 35;
this.home = 36;
this.left = 37;
this.up = 38;
this.right = 39;
this.down = 40;
}
// Accessible - bootstrap accordion
function accessible_bootstrap_accordion() {
var keys = new keyCodes();
// Tabs nav links
$(document).on('keydown', '.comp-information [data-toggle="collapse"]', function (e) {
var currentBtn = $(this),
currentCardWrapper = currentBtn.parents('.card');
function next() {
$(currentCardWrapper.next().find('[data-toggle="collapse"]').focus().attr('data-target')).collapse('show');
}
function prev() {
$(currentCardWrapper.prev().find('[data-toggle="collapse"]').focus().attr('data-target')).collapse('show');
}
if (e.which === keys.down) {
e.preventDefault(); // Disable arrow key scrolling
$(currentBtn.attr('data-target')).collapse('hide');
if (currentCardWrapper.next('.card').length) {
next();
} else {
prev();
}
} else if (e.which === keys.up) {
e.preventDefault(); // Disable arrow key scrolling
$(currentBtn.attr('data-target')).collapse('hide');
if (currentCardWrapper.prev('.card').length) {
prev();
} else {
next();
}
}
});
}
// document.ready
jQuery(document).ready(function ($) {
accessible_bootstrap_accordion();
});
转载请注明来源:jQuery+Bootstrap4可键盘控制的折叠菜单插件
本文永久链接地址:https://www.moyouyouw.cn/code/861.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论