Изменить изображение с помощью псевдоэлемента в JQuery

Question

У меня есть выпадающий список, и есть значок, который меняется при каждом нажатии.Я запрограммировал стиль CSS с помощью sass, и я не уверен, правильно ли я это сделал.В моем коде 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 {
        ...
        }
   }
}