Question

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

HTML

fallback_url

CSS

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

JS

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

继承了无效的代码 - JSFIDDLE

Answer 1

将ParentCreate更改为.accordion-panel。显然，div元素并不像是在address元素中。

＆＃13;

paragraph

＆＃13;

Answer 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。
将accordion-panel元素更改为div以包含地址

手风琴无法正常工作

2 个答案: