使用jQuery的.trigger()方法将div带到:active状态

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() }) 解决了我的问题。 感谢所有人的快速回复。

- Thodoris

---

我会使用toggleClass方法，为什么不呢。 - niklas

:active is mostly used with a and button not sure if it would work with div - abhishekkannojia

@abhishekkannojia，是的，这绝对可以使用:active。 - empiric

它的工作很好...请看这里：https://jsfiddle.net/oaLndvs8/ - LcSalazar

@LcSalazar 当用户点击时它运作良好，但在我尝试使用JS触发点击时则不起作用。 - Thodoris

Answer 1

您可以使用纯CSS而不需要使用 jQuery 来完成这项任务。您只需在 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 属性的更多信息。

- nashcheez

Answer 2

通常情况下，可以将: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>

- Rohan Kumar

Answer 3

如果您想在过渡中使用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>

- Renzo Calla