Question

我已经为div分配了一个:active CSS伪类，以使其对点击和保留具有“响应性”。

   .quarter:active{
      opacity: 0.5;
   }

我想要实现的是使用JQuery模拟长按。由于没有明显的变色，.trigger("click")似乎没有成功。我也试过.trigger("focus")和.trigger("mousedown")，但似乎我在某个地方陷入困境。

    <div id="1" class="quarter green" ></div>
    <div id="2" class="quarter red" ></div>
    <div id="3" class="quarter yellow" ></div>
    <div id="4" class="quarter blue" ></div>

有没有办法实现这一目标，还是必须使用toggleClass方法？

修改：感谢 nashcheez 回答我使用.trigger("focus")后跟setTimeout(...{ .blur() })解决了我的问题。谢谢大家的快速回复。

Answer 1

您可以在没有jQuery且纯css的情况下执行此操作。你可以在css中提供focus状态，在html中提供tabindex属性。

参考代码：

.quarter {
  height: 40px;
  width: 40px;
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
}

.quarter:focus {
  opacity: 0.5;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

<div id="1" class="quarter green" tabindex="1"></div>
<div id="2" class="quarter red" tabindex="1"></div>
<div id="3" class="quarter yellow" tabindex="1"></div>
<div id="4" class="quarter blue" tabindex="1"></div>

这样，点击opacity后，div会一直存在，点击外面的任何地方都会返回正常值。

详细了解tabindex属性here。

Answer 2

如果您想使用带过渡的toogleclass，这可以起作用

$('.quarter').click(function(){
    $(this).toggleClass('active');
})

.quarter:active, .active{
      opacity: 0.5;
      transition: 1s all ease-in;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="quarter green" >green</div>
    <div id="2" class="quarter red" >red</div>
    <div id="3" class="quarter yellow" >yellow</div>
    <div id="4" class="quarter blue" >blue</div>

Answer 3

通常，:active可以应用于<a>或<button>元素（因为它们是可点击的），首先需要div :active单击div，然后将处于：active 状态，同样在同一情况下，您可以使用此元素上的:focus显示为活动状态。第二个选项，您可以使用active类并将其添加到特定div。

请参阅下面的代码片段。

$('.quarter.green').trigger('focus');

.quarter:active,
.quarter:focus,
.quarter.active {
  opacity: 0.5;
  color: red;
}

.quarter:active {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="1" class="quarter green" contenteditable="true">1 Using contenteditable property</div>
<div id="2" class="quarter red active">2 Using active class</div>
<div id="3" class="quarter yellow">3</div>
<div id="4" class="quarter blue">4</div>

通过jquery .trigger（）方法将div带到：active状态

3 个答案: