Jquery - ＆＃34; hasClass（）＆＃34;不起作用

Question

Heei，我是这样的代码

HTML

<div class="card">
    <a href="#!">Click</a>
    <ul class="overlay_modal">
        /*some LI element*/
    </ul>
</div>

CSS

.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.overlay_modal {
  visibility: hidden;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.56);
}

Jquery的

$("div.card > a").click(function() {
  $(this).next().addClass("active");
});

if ($(".overlay_modal").hasClass("active")) {
    $("body").css({
        "height" : "100vh",
        "overflow" : "hidden"
    });
}
else {
    $("body").css("background-color", "red");
}

结果

正如您所看到的，当body hass class .overlay_modal时，active背景仍然是红色的。我的代码有什么问题，请帮助我：）

Answer 1

将活动类添加到ul元素中，如下所示：

<ul class="option__list active">

你拥有的jquery表达式会否定，因为首先没有.active类。

编辑：

$("div.card .option > a").click(function() {
    $(this).next().addClass("active");
    if ($(".card .option ul").hasClass("active")) {
        $("body").css({
            "height" : "100vh",
            "overflow" : "hidden"
        });
    }
    else {
        $("body").css("background-color", "red");
    }
});