手风琴无法正常打开

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