Javascript 手风琴不能正常工作

我建立了一个简单的手风琴的基础上，以确保它的工作，并纳入我的代码仔细，它似乎不工作。它现在正在显示高中的地址。当页面加载时，它不会隐藏地址，当我点击链接折叠描述时，它将不起作用。我参加了所有的课程，确保没有打字错误等。没有成功

HTML

JS

下面是不起作用的代码-

将.accordion面板更改为div。显然address元素不喜欢位于段落元素中

高中 国会大道1234号 德克萨斯州奥斯汀75087 将.accordion面板更改为div。显然，address元素不喜欢位于段落元素中

高中 国会大道1234号 德克萨斯州奥斯汀75087

---

看看这把小提琴

我做了一些调整

在js代码中将linkLocation选择器更改为id。 将手风琴面板元素更改为div以包含地址

---

看看这把小提琴

我做了一些调整

在js代码中将linkLocation选择器更改为id。 将手风琴面板元素更改为div以包含地址

---

从fiddle上看，似乎您需要包含jQuery。另外，您的fiddle尝试基于类进行选择，而html具有元素的ID。将其更改为class或更新JS代码以从id读取。例如，$linkLocation>.linkHover.is-active.children.accordion-panel.slideDown；可能最好的选择是将id更改为class。刚刚更新了JSFIDLE。从fiddle上看，似乎需要包含jQuery。另外，您的fiddle尝试基于class进行选择，而html具有元素的id。将其更改为class或更新JS代码以从id读取。例如，$linkLocation>.linkHover.is-active.children.accordion-panel.slideDown；可能最好的选择是将id更改为class。只是更新了JSFIDLE。我更新了您的代码和JSFIDLE。看起来第一个手风琴不会折叠，只有第二个手风琴我更新了你的代码和JSFIDLE。看起来第一个手风琴不会折叠，只有第二个手风琴我在JSFIDLE上更新了代码。看起来第一个手风琴不会只折叠第二个。我在JSFIDLE上更新了代码。看起来第一个手风琴不会折叠，只有第二个手风琴会折叠。

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

.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);
}
}

$(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");
});
});

<ul class="linkLocation">
  <li class="linkHover is-active"><a href="#mapTX" class="linkThumb"> Austin, TX</a>
    <div class="accordion-panel">
    <address style="font-style: normal;">
    High School<br>
    1234 Congress Ave<br>
    Austin, TX 75087
        </address></div>
  </li>
</ul>

$("#linkLocation > .linkHover.is-active").children(".accordion-panel").slideDown();
$("#linkLocation > .linkHover").click(function() {
//click code
});