时间戳

首页 > 解决方案 > 折叠手风琴时，边框会在这段时间内消失，当手风琴折叠时边框如何可见？

javascript - 折叠手风琴时，边框会在这段时间内消失，当手风琴折叠时边框如何可见？

问题描述

当手风琴折叠时，我注意到在这段时间内没有显示边框。例如，当手风琴展开时，我们会在展开时看到边框。手风琴折叠时也可以这样做吗？有没有办法在手风琴折叠时显示边界？这是小提琴：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;
        }

标签： javascriptjquerycss

解决方案

您正在使用选择器应用边框.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。

推荐阅读