jQuery addClass之前/之后
jQuery addClass之前/之后
提问于 2012-11-14 10:22:44
<div id="box"></div>
<div class="text"></div>?
$(document).ready(function () {
$('#box').click(function () {
$('.text').slideToggle('slow');
});
});
#box{
height:40px;
width:100px;
background:red;
}
#box:hover{background:blue;}
#box:after{
content: "";
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}
#box:hover:after{
border-top-color: blue;
}
.text{
display:none;
height:40px;
width:100px;
background:#fd0;
margin-top:20px;
}http://jsfiddle.net/zfQvD/16/
是否可以使用jQuery添加带样式的after箭头？当text class关闭时，如果显示text class，则删除after箭头类，然后添加箭头？我试过了，但似乎不起作用
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-11-14 10:45:04
根据@elclanrs的评论，你不能用JS添加伪元素。但是，您可以在CSS中声明它们仅在父元素具有特定类时显示，然后使用JS切换该类，如下所示：
#box.expanded:after {
content:'';
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}您还需要在您的JS中添加一行，以便在单击该框时添加此类：
$('#box').click(function () {
$(this).toggleClass('expanded');
$('.text').slideToggle('slow');
});请参阅此处的示例：http://jsfiddle.net/zfQvD/17/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13372132
复制相关文章
相似问题
腾讯云开发者
