手风琴将无法正常工作答案

【问题标题】：Accordion will not work properly手风琴将无法正常工作
【发布时间】：2018-01-25 22:19:43
【问题描述】：

我基于https://codepen.io/magnix/pen/OzeYmQ?limit=all&page=4&q=accordion 构建了一个简单的 Accordion，以确保它可以正常工作并仔细集成到我的代码中，但它似乎不起作用。它当前显示的是高中的地址。当页面加载时，它不会隐藏地址，当我单击链接折叠描述时 - 它不起作用。我去了所有的课程，确保没有错别字等。没有成功。

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

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

【问题讨论】：

从小提琴看来，您似乎需要包含 jQuery。
你的小提琴也试图根据类进行选择，而 html 有元素
刚刚更新了 JSFiddle。

标签： javascript css bootstrap-4 accordion

【解决方案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>

【讨论】：

我更新了你的代码和 JSFiddle。看起来第一个 Accordion 不会只折叠第二个

【解决方案2】：

看看这个小提琴。

https://jsfiddle.net/ugrktutx/

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

我做了一些调整，

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

【讨论】：

我更新了 JSFIDDLE 上的代码。看起来第一个 Accordion 不会只折叠第二个。