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

我有一个下拉列表，有一个图标，每次点击都会改变。我使用sass编码css样式，我不确定是否正确。但是我的jquery代码没有错误。我认为主要的问题是如何在scss中构造代码

html

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代码。

当jQuery将

.open

类切换到

.content

元素时，您缺少了scss上的

&

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

---

当jQuery将

.open

类切换到

.content

元素中时，您缺少SCS上的

&

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

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