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 {
        ...
        }
   }
}

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

1 个答案: