//Accordian jQuery
$(document).ready(function () {
$('.accordian-content').hide();
$(".accordian-content:first").slideDown();
$('.accordian-title').click(function () {
const flag = $(this).find('.accordian-title-icon').hasClass('accordian-title-icon-open');
$('.accordian-title-icon').removeClass('accordian-title-icon-open');
$('.accordian-content').not($(this).next('.accordian-content')).slideUp();
$(this).next('.accordian-content').slideToggle();
if (!flag) {
$(this).find('.accordian-title-icon').addClass('accordian-title-icon-open')
//Add this code
/* thisE = $(this)
setTimeout(function () {
$('html, body').animate({
scrollTop: thisE.offset().top -75 }, 'slow');
}, 450)//Wait for toggle animation to finish */
} else {
$(this).find('.accordian-title-icon').removeClass('accordian-title-icon-open')
}
});
}); .priority-lists {width:100%;}
.accordian-title {
width: 100%;
cursor: pointer;
padding: 20px 10px 20px 20px;
font-size: 20px;
}
.accordian-item {
color: rgba(40, 150, 211, 1);
margin: 10px auto;
width: 100%;
max-width: 530px;
background: #fff;
border: solid 1px #f0f0f0;
border-radius: 5px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
-moz-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.accordian-item:hover {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}
.accordian .accordian-item .accordian-title .accordian-title-icon {
background: #dedede;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
color: white;
font-weight: 700;
margin-right: 0;
padding: 0 0 0 1px;
position: relative;
vertical-align: top;
float: right;
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
}
.accordian .accordian-item .accordian-title .accordian-title-icon:before {
content: '+';
display: block;
position: absolute;
width: 100%;
font-size: 21px;
line-height: 24px;
margin: -1px;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:before {
display: none;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:after {
content: '-';
margin-top: -3px;
margin-left: -1px;
display: block;
position: absolute;
text-align: center;
width: 100%;
}
.accordian-content {
color: #3a3a3a;
padding: 0 20px 20px;
text-align: left;
}
.accordian-content2 {
color: #3a3a3a;
padding: 0 20px 20px;
text-align: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>SECTION 2</h2>
<div class="priority-lists">
<div class="accordian">
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence.</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>this is a sentence</p>
</div>
</div>
</div>
<h2>SECTION 2</h2>
<div class="priority-lists">
<div class="accordian">
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence.</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>this is a sentence</p>
</div>
</div>
</div>我试图让每个部分的第一个手风琴开始打开,但也表现为独立于其他部分(即,当你在一个部分打开接近的手风琴项目时,另一个部分不受影响,反之亦然.
我添加了$(“.accordian-content：first”).slideDown();这有效但只适用于第一个
最佳答案 而不是关闭所有.accordian内容元素 – 您只想关闭那些属于当前手风琴的部分：
$(this).parents('.accordian').find('.accordian-content')
以下是代码中的修复：
//Accordian jQuery
$(document).ready(function () {
$('.accordian-content').hide();
$(".accordian .accordian-item:first-child .accordian-content").slideDown();
$('.accordian-title').click(function () {
const flag = $(this).find('.accordian-title-icon').hasClass('accordian-title-icon-open');
$(this).parents('.accordian').find('.accordian-title-icon').removeClass('accordian-title-icon-open');
$(this).parents('.accordian').find('.accordian-content').not($(this).next('.accordian-content')).slideUp();
$(this).next('.accordian-content').slideToggle();
if (!flag) {
$(this).find('.accordian-title-icon').addClass('accordian-title-icon-open')
//Add this code
/* thisE = $(this)
setTimeout(function () {
$('html, body').animate({
scrollTop: thisE.offset().top -75 }, 'slow');
}, 450)//Wait for toggle animation to finish */
} else {
$(this).find('.accordian-title-icon').removeClass('accordian-title-icon-open')
}
});
});.priority-lists {width:100%;}
.accordian-title {
width: 100%;
cursor: pointer;
padding: 20px 10px 20px 20px;
font-size: 20px;
}
.accordian-item {
color: rgba(40, 150, 211, 1);
margin: 10px auto;
width: 100%;
max-width: 530px;
background: #fff;
border: solid 1px #f0f0f0;
border-radius: 5px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
-moz-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.accordian-item:hover {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}
.accordian .accordian-item .accordian-title .accordian-title-icon {
background: #dedede;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
color: white;
font-weight: 700;
margin-right: 0;
padding: 0 0 0 1px;
position: relative;
vertical-align: top;
float: right;
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
}
.accordian .accordian-item .accordian-title .accordian-title-icon:before {
content: '+';
display: block;
position: absolute;
width: 100%;
font-size: 21px;
line-height: 24px;
margin: -1px;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:before {
display: none;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:after {
content: '-';
margin-top: -3px;
margin-left: -1px;
display: block;
position: absolute;
text-align: center;
width: 100%;
}
.accordian-content {
color: #3a3a3a;
padding: 0 20px 20px;
text-align: left;
}
.accordian-content2 {
color: #3a3a3a;
padding: 0 20px 20px;
text-align: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>SECTION 2</h2>
<div class="priority-lists">
<div class="accordian">
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence.</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>this is a sentence</p>
</div>
</div>
</div>
<h2>SECTION 2</h2>
<div class="priority-lists">
<div class="accordian">
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence.</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>this is a sentence</p>
</div>
</div>
</div>为了将每个手风琴中的第一个元素设置为打开,我使用了
$(".accordian .accordian-item:first-child .accordian-content").slideDown();
