我已经创建了一个自定义的jquery手风琴,当我点击手风琴标题时,我会坚持使用它,它打开了两个手风琴,它应该打开我点击的那个,下面是代码:
$(document).ready(function() {
$(".acc-wrap > .acc-head").on("click", function() {
if ($(this).hasClass('active')) {
$(this).removeClass("active");
$(this).siblings('.acc-body').slideUp(200);
$(".acc-wrap > .acc-head").attr('class', 'acc-head opened');
} else {
$(".acc-wrap > .acc-head").attr('class', 'acc-head closed');
$(this).addClass("active");
$('.acc-body').slideUp(200);
$(this).siblings('.acc-body').slideDown(200);
}
});
});.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
Vestibulum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Vestibulum 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
我认为你应该使用next-function而不是siblings-function:
https://api.jquery.com/next/
京公网安备 11010802040832号 | 京ICP备19059560号-6 