在JQuery中使用伪元素更改图像
在JQuery中使用伪元素更改图像
提问于 2019-02-12 01:16:11
我有一个下拉列表，并且有一个每次点击都会改变的图标。我用sass编写了css样式，我不确定我做得是否正确。不过，我的jquery代码中没有错误。我认为主要的问题是我如何在scss中构造我的代码。
html
<div class="family-site">
<div class="content">
<span>
<a>관련사이트</a>
</span>
<div class="fs-links">
<ul>
<li><a href="#">고려대학교</a></li>
<li><a href="#">KUPID</a></li>
<li><a href="#">KURMS</a></li>
<li><a href="#">LINC플러스사업본부</a></li>
</ul>
</div>
</div>
</div>Jquery代码：
$(".content").click(function(event){
var col=0;
if(col==0){
$(this).toggleClass("open");
$(".fs-links > li:nth-child(4)").css("border-bottom", "none");
col=1;
} else if (col==1){
$(this).toggleClass("content");
col=0;
}
$(this).parent().find(".fs-links").first().toggle();
$(this).parent().siblings().find(".fs-links").hide();
});SCSS代码：
.family-site {
float: right;
margin: 0;
.content {
padding: 13px 0px 6px 18px;
background-color: #252525;
width: 208px;
border: 1px solid #575757;
margin: -9px 0;
cursor: pointer;
height: 19px;
a {
color: #fff;
text-decoration: none;
}
&:after {
content: "";
background-image: url(../images/icon/icon_fs_open.png);
background-repeat: no-repeat;
background-position: center;
padding: 17px 21px 0px 16px;
float: right;
height: 8px;
position: absolute;
right: 248px;
top: 26px;
border-left: 1px solid #575757;
height: 21px;
margin: -16px 1px 1px -1px;
}
.open{
&::after {
content: "";
background-image: url(../images/icon/icon_fs_close.png);
background-repeat: no-repeat;
background-position: center;
padding: 17px 21px 0px 16px;
float: right;
height: 8px;
position: absolute;
right: 248px;
top: 26px;
border-left: 1px solid #575757;
height: 21px;
margin: -16px 1px 1px -1px;
}
}
span {
float: left;
margin: -4px 0;
}
}
.fs-links {
display: none;
position: absolute;
top: -148px;
right: 247px;
width: 226px;
background-color: #343434;
border: 1px solid #575757;
border-bottom: none;
cursor: ponter;
ul {
list-style: none;
padding: 0;
margin: -1px;
li {
line-height: 39px;
border-bottom: 1px solid #575757;
a {
color: #c9c9c9;
margin: 14px;
}
&:hover {
background-color: #575757;
a {
color: #fff;
}
}
}
}
} }
我希望输出发生的是，当单击时，我想将向上箭头按钮改为向下箭头按钮。不确定我是否正确构造了scss代码。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-12 03:14:23
当您的jQuery将.open类切换到.content元素时，您将丢失SCSS上的&。
}
&.open{
&::after {
...
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54641488
复制相关文章
点击加载更多
相似问题
Laravel:如何从刀片模板访问类常量
laravel访问刀片中的模型常量
未加载Laravel刀片页面
在laravel刀片指令中使用未定义的常量
无法加载laravel刀片文件中的图像
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
