為什么當我嘗試通過添加類來使用 jQuery 隱藏我的 CSS 三角形時它不起作用？

Question

我想隱藏使用:before附加到 div 的 CSS 三角形，我遇到了這個解決方案來實現： https : //stackoverflow.com/a/11354393/998117

但是，我的 jQuery 不起作用：

$(".contact input[type='submit']").click(function(event) {
    event.preventDefault();
    $(".contact .inner").addClass("hidden");
    ...

（是的，它確實被調用了。）

這是我的 CSS/SASS 的樣子：

.contact {
    background: #3c6ea5;
    color: #fff;
    display: none;
    height: 500px;

    .hidden:before {
            display: none;
        }

    .inner {
        margin: auto;
        padding-top: 20px;
        position: relative;
        width: 400px;

        &:before {
            border: solid;
            border-color: #3c6ea5 transparent;
            border-width: 14px 16px 0 16px;
            bottom: -107px;
            content: "";
            display: block;
            position: absolute;
            right: -50px;
        }

        .hidden:before {
            display: none;
        }
    }
    ...

為什么它不隱藏它？ 我究竟做錯了什么？

Answer 1

你的 Sass 有點不對勁，應該是：

.inner {

    &.hidden:before {
        display: none;
    }
}

注意隱藏之前的 &

Answer 2

嘗試以下代碼來解決您的問題：

.inner { &:before {     
     .hidden & { display:none;}}}