手風琴無法正常打開

Question

我有這個手風琴。 一切都很好，除了打開。 當我按下一個時，它會同時打開。 我只需要打開我點擊的那個，當我點擊第二個時，我想先隱藏。 需要切換

當我將 display:flex 更改為 column 時，它可以正常工作，但在行中它會在單擊時打開。 它背后的邏輯對我來說沒有意義。

 $(document).ready(function(){ $('.accordion-list > li >.answer').hide(); $('.accordion-list > li').click(function() { if ($(this).hasClass("active")) { $(this).removeClass("active").find(".answer").slideUp(); } else { $(".accordion-list > li.active.answer").slideUp(); $(".accordion-list > li.active").removeClass("active"); $(this).addClass("active").find(".answer").slideDown(); } return false; }); });

 ul.accordion-list { position: relative; display: flex; flex-direction: row; width: 100%; height: auto; padding: 20px; margin: 0; list-style: none; background-color: #f9f9fa; } ul.accordion-list li { position: relative; display: block; width: 100%; height: auto; background-color: #F36F20; padding: 20px; margin: 0 auto 15px auto; border: 1px solid #eee; border-radius: 5px; cursor: pointer; color: #fff; } ul.accordion-list li.active h3:after { transform: rotate(45deg); } ul.accordion-list li h3 { font-weight: 700; position: relative; display: block; width: 100%; height: auto; padding: 0 0 0 0; margin: 0; font-size: 15px; letter-spacing: 0.01em; cursor: pointer; } ul.accordion-list li div.answer { position: relative; display: block; width: 100%; height: auto; margin: 0; padding: 0; cursor: pointer; } ul.accordion-list li div.answer p { position: relative; display: block; font-weight: 300; padding: 10px 0 0 0; cursor: pointer; line-height: 150%; margin: 0 0 15px 0; font-size: 14px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="accordion-list"> <li> <h3>info</h3> <div class="answer"> <table style="width: 100%; text-align: center;"> <tr style="background-color: #F36F20; color: #fff;"> <td class="cell" style="float: left; padding-left: 1rem;">kjkjkj</td> <td class="cell" style="float: right; padding-right: 1rem;">kjjkjk</td> </tr> <tr> <td class="cell" style="float: left; padding-left: 1rem;">kjjkkj:</td> <td class="cell" style="float: right; padding-right: 1rem;">kjkjk</td> </tr> <tr style="background-color: #F36F20; color: #fff;"> <td class="cell" style="float: left; padding-left: 1rem;">kjkjk:</td> <td class="cell" style="float: right; padding-right: 1rem;">kjkjk</td> </tr> <tr> <td class="cell" style="float: left; padding-left: 1rem;">kjkj:</td> <td class="cell" style="float: right; padding-right: 1rem;">kjkjkj</td> </tr> <tr style="background-color: #F36F20; color: #fff;"> <td class="cell" style="float: left; padding-left: 1rem;">kjkjkj:</td> <td class="cell" style="float: right; padding-right: 1rem;">kjkjk</td> </tr> <tr> <td class="cell" style="float: left; padding-left: 1rem;">kjkjkj</td> <td class="cell" style="float: right; padding-right: 1rem;">kjkjkjj,00€</td> </tr> </table> </div> </li> <li> <h3>second</h3> <div class="answer"> <table style="width: 100%; text-align: center;"> <tr style="background-color: #F36F20; color: #fff;"> <td class="cell" style="float: left; padding-left: 1rem;">kjkj</td> <td class="cell" style="float: right; padding-right: 1rem;">kjkjkjk</td> </tr> <tr> <td class="cell" style="float: left; padding-left: 1rem;">jkkjk</td> <td class="cell" style="float: right; padding-right: 1rem;">kjkjlj</td> </tr> <tr style="background-color: #F36F20; color: #fff;"> <td class="cell" style="float: left; padding-left: 1rem;">kjkljlk</td> <td class="cell" style="float: right; padding-right: 1rem;">jlklkjljk€</td> </tr> <tr> <td class="cell" style="float: left; padding-left: 1rem;">ljklkjljk:</td> <td class="cell" style="float: right; padding-right: 1rem;">20.12.2025</td> </tr> </table> </div> </li> </ul>

Answer 1

這是一個 CSS 問題。 父級是 flex，這就是為什么它在設置為auto時為 li 提供所有可用空間。 只需將 li 的高度設置為fit-content或min-content或max-content ：

ul.accordion-list li {
  height: fit-content;
}

Answer 2

這不是 jQuery 問題，而是 CSS 問題。

我一直在 JSFiddle 中進行試驗，並將 LI 的高度從 auto 更改為 min-content 似乎有效：

height: min-content;

https://jsfiddle.net/6w9j84rm/

您可以通過禁用 jQuery 代碼清楚地看到效果。

Answer 3

為ul.accordion-list li設置規則margin-bottom: auto 。 該規則具有出色的跨瀏覽器兼容性！

而且效果很好。

它應該是這樣的：

ul.accordion-list li {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-color: #F36F20;
    padding: 20px;
    margin: 0 auto 15px auto;
    border: 1px solid #eee;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;

    margin-bottom: auto;
}