如何保持元素：即使在单击后仍处于活动状态

Question

从这个question 得到了非常模糊和不需要的答案，所以我决定发布一个明确的问题简报我面临的问题。

我使用的代码如下所示：

.flipClass {  
            font-size: Large;
            background-color: #4399CD; 
            color:#fff;
            text-align: left;
}

.flipClass:active{
                  background:#fff; 
                  color:#4399CD;
                  cursor:pointer;
                  transition:all .1s ease-out;
}
.flipClass:active:before {
                          content:'\f102';
                          font-family:FontAwesome;
                          font-style:normal;
                          font-weight:normal;
                          text-decoration:inherit;
                          padding-left:6px; 
                          padding-right:8px;
                          transition:all .3s;
}

单击元素后，如何获得由 .flipClass:active 定义的 CSS 样式？目前，它只会在短时间内变得活跃。

请看下面给出的sn-p：

 $("div[id^=flip]").click(function() {
   $(this).next("div[id^=panel]").stop().slideToggle("slow");
 });

.panelClass,
.flipClass {
  padding: 5px;
  padding-left: 15px;
  border: solid 1px #c3c3c3;
}
.flipClass {
  font-size: Large;
  background-color: #4399CD;
  color: #fff;
  text-align: left;
}
.flipClass:active {
  background: #fff;
  color: #4399CD;
  cursor: pointer;
  transition: all .1s ease-out;
}
.flipClass:active:before {
  content: '\f102';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  transition: all .3s;
}
.panelClass {
  padding: 30px;
  padding-top: 10px;
  display: none;
  background-color: #F3F5F6;
  color: #000;
}
.flipClass:before {
  content: '\f107';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  transition: all .3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />Currently, the .flipClass:active CSS style sheet is working only for a brief moment (precisely until the duration of the mouseclick and maybe some small offset). Click and HOLD mouseclick when clicking on .flipClass to see the effect. I want it to stay!
<div class="flipClass" id="flip1">FIRST HEADING</div>
<div class="panelClass" id="panel1">How to keep the first heading 'active' when this panel is showing? If I could figure that out, I could change the arrow to a pullup arrow too :3</div>
<div class="flipClass" id="flip2">SECOND HEADING</div>
<div class="panelClass" id="panel2">If both Headings have been clicked, this Heading and any other heading that were clicked should also be active (or atleast remain in the CSS state defined by .flipClass:active here)</div>

目前，.flipClass:active CSS 样式表只工作一小段时间（精确到鼠标单击的持续时间，可能还有一些小的偏移量）。单击flipClass 后，我需要一种方法使其始终保持活动状态。我是否为此使用了不合适的伪选择器？

有什么解决方法吗？或者是否有其他专门用于此目的的伪选择器？我可以举个例子吗？

Answer 1

对于接受用户输入焦点的元素，例如按钮元素，:focus 伪类接近您想要的。但在这种情况下，您似乎可以展开多个部分，因此:focus 不会在这里剪切。

相反，您可以只使用 JS 来应用一个额外的类，如下所示：

$("div[id^=flip]").click(function() {
   $(this).toggleClass("flipClass-active").next("div[id^=panel]").stop().slideToggle("slow");
 });

.panelClass,
.flipClass {
  padding: 5px;
  padding-left: 15px;
  border: solid 1px #c3c3c3;
}
.flipClass {
  font-size: Large;
  background-color: #4399CD;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: all .1s ease-out;
}
.flipClass-active,
.flipClass:active {
  background: #fff;
  color: #4399CD;
}
.flipClass::before {
  content: '\f107';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  transition: all .3s;
}
.flipClass-active::before,
.flipClass:active::before {
  content: '\f102';
}
.panelClass {
  padding: 30px;
  padding-top: 10px;
  display: none;
  background-color: #F3F5F6;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />Currently, the .flipClass:active CSS style sheet is working only for a brief moment (precisely until the duration of the mouseclick and maybe some small offset). Click and HOLD mouseclick when clicking on .flipClass to see the effect. I want it to stay!
<div class="flipClass" id="flip1">FIRST HEADING</div>
<div class="panelClass" id="panel1">How to keep the first heading 'active' when this panel is showing? If I could figure that out, I could change the arrow to a pullup arrow too :3</div>
<div class="flipClass" id="flip2">SECOND HEADING</div>
<div class="panelClass" id="panel2">If both Headings have been clicked, this Heading and any other heading that were clicked should also be active (or atleast remain in the CSS state defined by .flipClass:active here)</div>

Answer 2

抛弃 jQuery，利用 :checked 伪类、labels 和 + 选择器，我们实际上可以使用原生和静态！

这意味着我们必须自己为展示面板的max-height 设置动画。因为我们必须对整个max-height 进行动画处理，而不仅仅是内容高度，所以我们必须欺骗眼睛让动画变得不那么极端。为此，还要为顶部/底部填充设置动画 - 让观看者的眼睛完成其余的工作。

此解决方案的缺点是，您必须能够可靠地设置面板高度的上限。在动画结束后添加overflow:auto; 可以在一定程度上缓解这种情况，但我会将如何做到这一点作为练习留给读者。

.panelClass,
.flipClass {
  display:block;
  padding: 5px;
  padding-left: 15px;
  border: solid 1px #c3c3c3;
}

.flipClass {
  font-size: Large;
  background-color: #4399CD;
  color: #fff;
  text-align: left;
  cursor:pointer;
}
.flipClass:before {
  content: '\f107';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  transition: all .3s;
}
:checked + .flipClass {
  background: #fff;
  color: #4399CD;
  transition: all .1s ease-out;
}
:checked + .flipClass:before {
  content: '\f102';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  transition: all .3s;
}

.panelClass {
  /*display: none;/*We have to animate this ourselves now*/
  padding:0 30px;
  max-height:0;
  background-color: #F3F5F6;
  color: #000;
  transition:all 450ms ease-in-out;
  overflow:hidden;
}
:checked + .flipClass + .panelClass{
  max-height:900px;
  padding-top: 10px;
  padding-bottom: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />Currently, the .flipClass:active CSS style sheet is working only for a brief moment (precisely until the duration of the mouseclick and maybe some small offset). Click and HOLD mouseclick when clicking on .flipClass to see the effect. I want it to stay!
<input type="checkbox" id="flip1" hidden />
<label class="flipClass" for="flip1">FIRST HEADING</label>
<div class="panelClass" id="panel1">How to keep the first heading 'active' when this panel is showing? If I could figure that out, I could change the arrow to a pullup arrow too :3</div>
<input type="checkbox" id="flip2" hidden />
<label class="flipClass" for="flip2">SECOND HEADING</label>
<div class="panelClass" id="panel2">If both Headings have been clicked, this Heading and any other heading that were clicked should also be active (or atleast remain in the CSS state defined by .flipClass:active here)</div>

另一种选择是使用:target (MDN) 来“存储”最近选择的选项...但是如果用户在打开页面后为页面添加书签，则会导致奇怪的行为，一些额外的逻辑来处理单击它以关闭它，并且只能标记一项。如果您想要只展示一个手风琴，这绝对是一个不错的选择。或者，您可以将上述代码中的复选框替换为单选按钮。

Answer 3

您不能在 CSS 中使用 :active 来执行此操作。保持链接处于活动状态的一种方法是使用您的脚本添加一个类，like this

$("div[id^=flip]").click(function() {
   $(this).toggleClass('active').next("div[id^=panel]").stop().slideToggle("slow");
 });

.flipClass.active {
  background: #fff;
  color: #4399CD;
  cursor: pointer;
  transition: all .1s ease-out;
}
.flipClass.active:before {
  content: '\f102';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  transition: all .3s;
}

:active 只会在按住鼠标按钮时应用样式 下。应用样式并在点击时保持应用的唯一方法是 使用一点 JavaScript。

（此报价来源：Can I have an onclick effect in CSS?）