jquery - 遇到 Jquery 的 toggleClass 问题

Question

我一直在尝试让 toggleClass 正常工作，因此单击会更改框的颜色，但这似乎不起作用。这是我的代码。

$(document).ready(function(){
  $(".box").click(function(){
    $(this).toggleClass("open");
  });
});

.box{
  position: relative;
  margin: auto;
  height: 10em;
  width: 10em;
  background: red;
  top: 10em;
}   
.open{
  background: blue;
}

Answer 1

在 CSS 中试试这个？可能是特异性问题。试试这个:

.box.open {
    background: blue;
}

片段

$(document).ready(function(){
  $(".box").click(function(){
    $(this).toggleClass("open");
  });
});

.box {
  position: relative;
  margin: auto;
  height: 10em;
  width: 10em;
  background: red;
  top: 10em;
}   
.box.open {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box"></div>