手风琴无法正常打开

Question

我有这个手风琴。除了打不开，一切都好。当我按其中一个时，它会同时打开两个。我需要打开我单击的那个，当我单击第二个时，我想先隐藏。需要让它切换当我将 display:flex 更改为列时，它可以正常工作，但在行中，它会在单击时打开。我不明白其背后的逻辑是什么。  $(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;  }  

Answer 1

这不是 jQuery 问题，而是 CSS 问题。

我一直在 JSFiddle 中进行实验，并将 LI 的高度从 auto 更改为 min-content 似乎有效：

height: min-content;

https://jsfiddle.net/6w9j84rm/

禁用 jQuery 代码可以清楚地看到效果。

Answer 2

这是一个 CSS 问题。父级是 flex，这就是为什么当设置为 li 时它会将所有可用空间提供给 li auto。只需将 li 的高度设置为fit-contentor min-contentor max-content：

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




Answer 3

margin-bottom: auto设定规则ul.accordion-list li。该规则具有极好的跨浏览器兼容性！

而且效果很好。

应该是这样的：

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;

}