在 JQuery 中使用伪元素更改图像

Question

我有一个下拉菜单，每次点击都会有一个图标变化。我使用 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 代码。

Answer 1

当您的 jQuery 将 .open 类切换到 .content 元素时，您在 SCSS 上缺少 &。

}
   &.open{
        &::after {
        ...
        }
   }
}