我基于 https://codepen.io/magnix/pen/OzeYmQ?limit=all&page=4&q=accordion 构建了一个简单的 Accordion 确保它有效并仔细集成到我的代码中,但它似乎不起作用。它当前显示的是高中的地址。当页面加载时,它不会隐藏地址,当我点击链接折叠描述时,它不会工作。我参加了所有类(class),以确保没有拼写错误等。没有成功。
HTML
<ul class="linkLocation">
<li class="linkHover is-active">
<a href="#mapTX" class="linkThumb"> Austin, TX</a>
<p class="accordion-panel">
<address style="font-style: normal;">
High School 1<br>
1234 Congress Ave<br>
Austin, TX 75087
</address></p>
</li>
<li class="linkHover">
<a href="#mapLA" class="linkThumb"> Shreveport, LA</a>
<p class="accordion-panel">
<address style="font-style: normal;">
High School 2<br>
1234 Congress Ave<br>
Shreveport, LA 75087
</address></p>
</li>
</ul>
CSS
.linkThumb {
margin: 0;
padding: .8rem 0;
cursor: pointer;
font-weight: normal;
&::before {
content: '';
display: inline-block;
height: 7px;
width: 7px;
margin-right: 1rem;
margin-left: .5rem;
vertical-align: middle;
transform: rotate(-45deg);
transition: transform .2s ease-out;
}
}
.accordion-panel {
margin: 0;
padding-bottom: .8rem;
display: none;
}
.linkHover.is-active {
.linkThumb::before {
transform: rotate(45deg);
}
}
JS
$(function() {
// (Optional) Active an item if it has the class "is-active"
$(".linkLocation > .linkHover.is-active").children(".accordion-panel").slideDown();
$(".linkLocation > .linkHover").click(function() {
// Cancel the siblings
$(this).siblings(".linkHover").removeClass("is-active").children(".accordion-panel").slideUp();
// Toggle the item
$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
});
});
这是不起作用的代码 - JSFIDDLE
最佳答案
将 .accordion-panel
更改为 div
。显然 address
元素不喜欢放在 paragraph
元素中。
<div class="accordion-panel">
<address style="font-style: normal;">
High School<br>
1234 Congress Ave<br>
Austin, TX 75087
</address>
</div>
关于javascript - Accordion 将无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48452828/