Question

我有下面显示代码的按钮，它在不活动时效果很好，但是当我单击它时，它的颜色从灰色更改为应该的绿色，但不再可单击。

我不再可以单击它以使其不活动并恢复为灰色。我该如何解决这个问题？

$("#TmpFBtn").click(function() {
  if ($("#TmpFBtn").hasClass("active")) {
    $("#TmpFBtn").removeClass('active');
  } else {
    $("#TmpFBtn").addClass('active');
  }
});

.button {
  text-decoration: none;
  width: 14%;
  float: left;
  background-color: #5e6472;
  border: none;
  color: white;
  padding: 5px 12px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  margin: 0;
}

.button:hover {
  background-color: #2a9d8f;
}

.button.active {
  background-color: #2a9d8f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="featuresCB">
  <button class="button pksOnsets" style="width: 100%;" id="TmpFBtn" name="TmpFBtn"> Temporal Features <i class="fa fa-caret-down" aria-hidden="true"></i></button>
</div>

Answer 1

$("#TmpFBtn").click(function() {
  if ($("#TmpFBtn").hasClass("active")) {
    $("#TmpFBtn").removeClass('active');
  } else {
    $("#TmpFBtn").addClass('active');
  }
});

.button {
  text-decoration: none;
  width: 14%;
  float: left;
  background-color: #5e6472;
  border: none;
  color: white;
  padding: 5px 12px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  margin: 0;
}
.button.active {
  background-color: #2a9d8f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="featuresCB">
  <button class="button pksOnsets" style="width: 100%;" id="TmpFBtn" name="TmpFBtn"> Temporal Features <i class="fa fa-caret-down" aria-hidden="true"></i></button>
</div>

问题主要出在悬停部件上，即使第二次单击后它仍保持悬停状态，显示背景为绿色。

Answer 2

它正在运行，但对您不可见，因为当您将鼠标悬停在其上时，已经应用了:hover，并且应用了背景色。如果您检查并打开开发工具，则会看到正在向其中添加活动类。

因此，只需删除：hover状态即可注意到更改。如果您仍然希望处于：hover状态，请尝试在hover状态下更改背景颜色。

顺便说一句，适合您的更好的jQuery：

$("#TmpFBtn").click(function() { 
  $(this).toggleClass("active"); 
}

它执行相同的工作，但行数较少。

激活后按钮不再可单击

2 个答案: