我有一个用 css3 制作的 Accordion ,当使用 :target 伪类点击时,将内容的高度设置为零,然后设置为 150px。我想使用 jquery 使内容在我再次单击同一元素时切换,我该怎么做?
我试过创建一个单独的类并在查询中使用 toggleClass 方法。
$(document).ready(function() {
$("a.accordion__trigger").click(function() {
$("accordion__trigger").toggleClass("accordion__content__hidden");
});
});
.final__accordion {
position: relative;
display: block;
border: 1px solid #e0e0e0;
font-size: 0.8rem;
}
.final__accordion .accordion__item {
display: block;
margin-top: 5px;
}
.final__accordion .accordion__content {
display: flex;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
height: 0;
-webkit-transition: height 1s ease, padding 0.3s linear;
transition: height 1s ease, padding 0.3s linear;
}
.final__accordion .accordion__content p {
padding: 20px;
margin: 0;
text-align: left;
max-width: initial;
}
.final__accordion .accordion__content:target {
height: 150px;
text-align: left;
}
.accordion__content__hidden {
height: 0;
}
.final__accordion .accordion__trigger {
text-decoration: none;
}
.final__accordion .accordion__title {
position: relative;
display: block;
margin: 0;
padding: 10px;
font-size: 1em;
background-color: rgb(234, 10, 42);
color: #FFFFFF;
border: 1px solid red;
cursor: pointer;
}
.final__accordion .accordion__title:hover {
background-color: red;
}
.final__accordion .accordion__title:after {
position: absolute;
top: calc(50% - 12px);
right: 20px;
width: 15px;
height: 15px;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="final__accordion" id="#accordion">
<div class="accordion__item">
<a href="#final__tab1" class="accordion__trigger accordion__title">Accordion 1</a>
<div id="final__tab1" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab2" class="accordion__trigger accordion__title">Accordion 2</a>
<div id="final__tab2" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab3" class="accordion__trigger accordion__title">Accordion 3</a>
<div id="final__tab3" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab4" class="accordion__trigger accordion__title">Accordion 4</a>
<div id="final__tab4" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab5" class="accordion__trigger accordion__title">Accordion 5</a>
<div id="final__tab5" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab6" class="accordion__trigger accordion__title">Accordion 6</a>
<div id="final__tab6" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
</div>
最佳答案
我建议您在单击 anchor 元素时切换内容元素上的类。而且,如果您在 CSS 中的 toggleClass 名称上添加 :target
样式,那么它将像魅力一样工作。
为了您的信息,我已将 jQuery 单击事件更改为:$(this).parent().find(".accordion__content").toggleClass("accordion__content__hidden");
并更改了目标样式从 accordion__content:target
到 accordion__content__hidden:target
CSS。
请参阅下面的代码段:
$(document).ready(function() {
$("a.accordion__trigger").click(function() {
$(this).parent().find(".accordion__content").toggleClass("accordion__content__hidden");
});
});
.final__accordion {
position: relative;
display: block;
border: 1px solid #e0e0e0;
font-size: 0.8rem;
}
.final__accordion .accordion__item {
display: block;
margin-top: 5px;
}
.final__accordion .accordion__content {
display: flex;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
height: 0;
-webkit-transition: height 1s ease, padding 0.3s linear;
transition: height 1s ease, padding 0.3s linear;
}
.final__accordion .accordion__content p {
padding: 20px;
margin: 0;
text-align: left;
max-width: initial;
}
.final__accordion .accordion__content__hidden:target { /*CHANGED TARGET ON TOGGLE CLASSNAME*/
height: 150px;
text-align: left;
}
.accordion__content__hidden {
height: 0;
}
.final__accordion .accordion__trigger {
text-decoration: none;
}
.final__accordion .accordion__title {
position: relative;
display: block;
margin: 0;
padding: 10px;
font-size: 1em;
background-color: rgb(234, 10, 42);
color: #FFFFFF;
border: 1px solid red;
cursor: pointer;
}
.final__accordion .accordion__title:hover {
background-color: red;
}
.final__accordion .accordion__title:after {
position: absolute;
top: calc(50% - 12px);
right: 20px;
width: 15px;
height: 15px;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="final__accordion" id="#accordion">
<div class="accordion__item">
<a href="#final__tab1" class="accordion__trigger accordion__title">Accordion 1</a>
<div id="final__tab1" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab2" class="accordion__trigger accordion__title">Accordion 2</a>
<div id="final__tab2" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab3" class="accordion__trigger accordion__title">Accordion 3</a>
<div id="final__tab3" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab4" class="accordion__trigger accordion__title">Accordion 4</a>
<div id="final__tab4" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab5" class="accordion__trigger accordion__title">Accordion 5</a>
<div id="final__tab5" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
<div class="accordion__item">
<a href="#final__tab6" class="accordion__trigger accordion__title">Accordion 6</a>
<div id="final__tab6" class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
</div>
</div>
</div>
关于jquery - 我怎样才能让这个 Accordion 中的元素在第二次点击它们后切换和隐藏内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56079829/