Question

我有一个锚元素。单击时，文本Hello颜色会更改。再次单击时，文本Hello将恢复为原始颜色。

$(document).ready(function() {
  $('.link').on('click', function() {
    $(this).toggleClass('link-active');
  });
});

.link {
  color: red;
  cursor: pointer;
}

.link:hover {
  background-color: blue !important;
  color: black !important;
}

.text1 {
  font-size: 32px;
}

.text2 {
  font-size: 16px;
  color: black
}

.link.link-active {
  background-color: blue;
  color: black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link">
  <div class="text1"><span>Hello</span></div>
  <div class="text2">fixed size text</div>
</a>
<a class="link">
  <div class="text1"><span>Hello</span></div>
  <div class="text2">fixed size text</div>
</a>

移动设备中的当前行为：当从初始状态单击锚元素时（Hello文本为红色），Hello文本变为黑色。再次单击时，在黑色状态下，颜色不会变为红色。只有在我点击锚元素之外的身体的任何地方后才会改变。

在桌面上，只有在我将光标移离锚元素后才会改变。

我想要的是：Hello文本，每次点击都会改变颜色。

这种行为可能是什么原因？

jquery toggleClass无法在移动设备中运行

0 个答案: