<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;
}
是否可以使用 jQuery 添加样式化的 after
箭头?
当text class
关闭时,删除after
箭头类
如果显示 text class
,则添加箭头?
我尝试过,但似乎不起作用
最佳答案
根据 @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/
关于javascript - jQuery addClass 之后/之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13372132/