Jquery 单击时更改标签文本？

因此，我有一个非常简单的手风琴，只使用CSS，我想改变文本点击细节关闭，然后再次点击时返回，有人知道我会怎么做吗？如果它不使用JS，那就太好了，但我会选择任何一个！谢谢

<input type="checkbox" id="checkbox-1" name="checkbox-accordion" /><label for="checkbox" style="text-align:right;">Click for details</label>


.accordion {
    font-size:14px;
    border:none;
    border-radius:10px;
    width:790px;
    padding:10px;
    margin: 0 0 0 10px;
    -moz-border-radius: 0 0 15px 15px;
    border-radius: 0 0 15px 15px;
    -webkit-box-shadow: 2px 2px 6px 0px rgba(148,148,148,1);
    -moz-box-shadow: 2px 2px 6px 0px rgba(148,148,148,1);
    box-shadow: 2px 2px 6px 0px rgba(148,148,148,1);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
.accordion ul {
    list-style:none;
    margin:0;
    padding:0;    
}
.accordion li {
    margin:0;
    padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
    display:none;
}
.accordion label {
    display:block;
    font-size:16px;
    line-height:16px;
    background:#ffffff;
    border:none;
    color:#464646;
    text-shadow:1px 1px 1px rgba(255,255,255,0.3);
    font-weight:700;
    cursor:pointer;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {

}
.accordion .content {
    padding:0 10px;
    overflow:hidden;

    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
}
.accordion p {
    color:#333;
    margin:0 0 10px;
}


/* Vertical */
.vertical ul li {
    overflow:hidden;
    margin:0 0 1px;
}
.vertical ul li label {
    padding:10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
    border-bottom:0;
}
.vertical ul li .content {
    height:0px;
    border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
    height:220px;
}

点击查看详情
.手风琴{
字体大小：14px；
边界：无；
边界半径：10px；
宽度：790px；
填充：10px；
利润率：0.10px；
-moz边界半径：0 0 15px 15px；
边界半径：0 0 15px 15px；
-webkit盒阴影：2px2px6px0pxRGBA（148,1）；
-moz盒阴影：2px2px6px0pxrgba（148,1）；
盒影：2p2px6px0pxRGBA（148,1）；
-webkit背景剪辑：填充框；
-moz背景剪辑：填充；
背景剪辑：填充框；
}
手风琴{
列表样式：无；
保证金：0；
填充：0；
}
李国章{
保证金：0；
填充：0；
}
.accordion[type=radio]，.accordion[type=checkbox]{
显示：无；
}
.手风琴标签{
显示：块；
字体大小：16px；
线高：16px；
背景：#ffffff；
边界：无；
颜色：#4646；
文本阴影：1px 1px 1px rgba（255255255,0.3）；
字号：700；
光标：指针；
-webkit转换：所有.2都可以轻松完成；
-moz转换：所有.2秒都放松；
}
.accordio ul li标签：悬停、.accordion[type=radio]：选中~label、.accordion[type=checkbox]：选中~label{
}
.手风琴.内容{
填充：0 10px；
溢出：隐藏；
-webkit过渡：所有.5s的放松；
-moz过渡：全部.5s放松；
}
.手风琴{
颜色：#333；
利润率：0.10px；
}
/*垂直的*/
李国章议员{
溢出：隐藏；
利润率：0.01倍；
}
.垂直ul-li标签{
填充：10px；
}
.vertical[type=radio]：选中~label，.vertical[type=checkbox]：选中~label{
边界底部：0；
}
.垂直ul li.内容{
高度：0px；
边界顶部：0；
}
.vertical[type=radio]：选中~label~.content，.vertical[type=checkbox]：选中~label~.content{
高度：220px；
}

您可以在内容中使用：after伪元素，如下所示：

input#checkbox-1:checked + label {
    visibility: hidden;
    position: relative;
}

input#checkbox-1:checked + label:after {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    content: "Close";
}

但是如果没有额外的标记，这对IE是不起作用的。您需要在标签中放置一个元素，并用CSS隐藏它

<input type="checkbox" id="checkbox-2" name="checkbox-accordion" />
<label for="checkbox" style="text-align:right;"><span>Click for details</span></label>

input#checkbox-2:checked + label span {
    display: none;
}

input#checkbox-2:checked + label:after {
    content: "Close";
}

点击查看详情
输入#复选框-2：选中+标记范围{
显示：无；
}
输入#复选框-2：选中+标签：之后{
内容：“关闭”；
}

---

请参见演示

仅在标签内使用两个跨距，并根据是否选中复选框来显示它们

#checkbox-1:checked+label>。打开{
显示：内联；
}
#复选框-1：选中+标记>.off，
#复选框-1+标签>.on{
显示：无；
}

我走了