javascript - Accordion 将无法正常工作

Question

我基于 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

Answer 1

将 .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>