如何切换div：在点击事件之前

Question

可以在单击事件之前切换Div：之前

.div:before {
    content: '';
    border: 20px solid transparent;
    border-right-color: #F3F3F4;
    border-left: 0;
    position: absolute;
    right: 0;
    top: -webkit-calc(50% - 20px);
    top: calc(50% - 20px);
    width: 0;
    height: 0;
    z-index:1000;
}

Answer 1

您可以在点击时切换课程，并将::before样式添加到切换课程中：

.div.active:before {
  ...
}

$('.div').on('click', function() {
  $(this).toggleClass('active');
});

Answer 2

点击后，您将向.div元素添加另一个类，定义像

这样的规则

$('.div').click(function() {
  $(this).toggleClass('clicked');
})

.div:before {
  content: 'before';
  border: 20px solid transparent;
  border-right-color: #F3F3F4;
  border-left: 0;
  position: absolute;
  right: 0;
  top: -webkit-calc(50% - 20px);
  top: calc(50% - 20px);
  width: 0;
  height: 0;
  z-index: 1000;
}
.div.clicked:before {
  content: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">click to toggle</div>