javascript - 折叠 Accordion 时，边框会在此期间消失，折叠 Accordion 时边框如何可见？

Question

折叠 Accordion 时，我注意到在这段时间内没有显示边框。例如，当 Accordion 展开时，我们会在展开时看到边界。这也可以在折叠 Accordion 时完成吗？ Accordion 折叠时有没有办法显示边界？这是 fiddle :https://jsfiddle.net/cliffeee/cfp1Lmob/1/

 .accordion-toggle {
      background-color: #f1f1f1;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;

        }

        .accordion-toggle:hover {
            background-color: #dad9d6;

        }


        .collapse {
            padding: 0 18px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 1.0s;
            margin-bottom: -4px;
        }

        .collapsed + .collapse {
          border-left: 2px solid #f1f1f1;
          border-right: 2px solid #f1f1f1;
          border-bottom: 2px solid #f1f1f1
        }

        .collapse p {
            padding-top: 13px;
        }

Answer 1

您正在使用选择器 .collapsed + .collapse 应用边框——但是当元素折叠时您的触发元素将 collapsed 类带走，因此边框消失。

使用在两种情况下都匹配的选择器应用边框 - 使用 accordion-toggle 类，它在两种状态下都存在:

.accordion-toggle + .collapse {
    border-left: 2px solid #f1f1f1;
    border-right: 2px solid #f1f1f1;
    border-bottom: 2px solid #f1f1f1;
}

https://jsfiddle.net/nyujfwg3/

但这样一来，当元素折叠时，底部边框仍然可见。如果你也想避免这种情况，你要么需要在过渡结束后把它拿走；要么或将其应用于 .collapse 内的元素。