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定义的CSS样式：点击元素后激活？目前，它仅在短时间内变得活跃。

请查看下面的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

目前，.flipClass：活动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伪类，label和+选择器，我们实际上可以原生和静态！

这意味着我们必须自己制作一个透露面板的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仅在按住鼠标按钮时应用样式下。应用样式并将其应用于onclick的唯一方法是使用一点JavaScript。

（这句话的来源：Can I have an onclick effect in CSS?）

如何保留元素：即使在点击

3 个答案: