点击更改标签文字？

-2

所以我有一个非常简单的手风琴，只使用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; 
}

来源

2014-10-02 IAMABANANA

您可以使用：伪元素的内容，这样的事情后：

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

的演示中看到http://jsfiddle.net/r292puep/3/

来源

2014-10-02 15:28:58 LL1138

只使用一组跨度的标签内，并告诉他们或不基于是否复选框被选中

#checkbox-1:checked + label > .on{ 
 
    display: inline; 
 
} 
 

 
#checkbox-1:checked + label > .off, 
 
#checkbox-1 + label > .on { 
 
    display: none; 
 
}

<input type="checkbox" id="checkbox-1" name="checkbox-accordion" /> 
 
<label for="checkbox" style="text-align:right;"><span class="on">I'm ON</span><span class="off">I'm OFF</span></label>

来源

2014-10-02 15:29:29

点击更改标签文字？

回答

相关问题