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;
}

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试添加event.preventDefault（）;防止click事件被多次触发。

＆＃13;

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

＆＃13;

遇到Jquery的toggleClass问题

2 个答案: