javascript - 如何将 addClass 函数用于伪 :before on click

Question

我创建了一个 slideDown 功能，当您单击标题时，一个新的部分会向下滑动。当只显示标题时(用户还没有点击它)我有一个加号。然后当他们点击标题时，我希望 background-image 显示一个减号图标，表示该部分已折叠。

我正在用伪 :before 填充图像。在我的 javascript 中，我试图通过添加 opened 类来使用 addClass 函数让减号占据加号的位置。但是，我的尝试失败了。这是我尝试添加类(class)的地方:

.infoTitles:before.open

有没有人看到我做错了什么？

$('.faqBlock').click(function() {
  var relative = $(this);
  if (!relative.hasClass('opened')) {
    $('.opened').removeClass('opened').next('.infoFaqContainer').slideUp(500);
    relative.addClass('opened').next('.infoFaqContainer').slideDown();
    $('.infoTitles:before').addClass('opened'); //this is where I am adding the class for the icon
  } else {
    relative.removeClass('opened').next('.infoFaqContainer').slideUp(500);
  }
  return false;
});

.faqTitle {
	font-size: 1.8rem;
	margin-bottom: 50px;
}
.faqCont {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #2E393F;
}
.faqBlock {
	width: 100%;
	padding: 40px 0;
	cursor: pointer;
}
.infoTitles {
	color: #2E393F;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.5rem;
}
.infoTitles:before {
	content: '';
	vertical-align: bottom;
	float: left;
	margin-right: 8px;
	background-image: url('https://www.colourbox.com/preview/5697410-icon-plus-black.jpg');
	background-size: 15px 15px;
	width: 15px;
	height: 15px;
	display: block;
}
.infoTitles:before.open {
	content: '';
	vertical-align: bottom;
	float: left;
	margin-right: 8px;
	background-image: url('https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/minus-big-512.png');
	background-size: 15px 15px;
	width: 15px;
	height: 15px;
	display: block;
}
.infoFaqContainer {
	display: none;
}
.infoFaqInner {
	padding: 0 5px 40px 5px;
}
.faqDesc {
	font-family: 'Open-sans', sans-serif;
	font-size: 1rem;
	/*letter-spacing: .1rem;*/
	line-height: 1.5em;
	color: #2E393F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="weddingInfoBlock">
<div class="wInfoBlockCont">
  <span class="wIBCTitle">FAQ's</span>
  <div class="faqCont">
    <div class="faqBlock">
      <div class="infoTitles">Title</div>
    </div>	
    <div class="infoFaqContainer">
      <div class="infoFaqInner">
        <p class="faqDesc">
          Text
        </p>
      </div>
    </div>
  </div>
</div>

Answer 1

1) 您在样式规则中使用了错误的类 - 该类是 opened 而不是 open

2) 该类未添加到伪元素中，这是您的 css 的结构 - 它已添加到父元素中。

基本上规则需要更改为:

.infoTitles:before.open {

到

.opened .infoTitles:before {

下面的完整代码段:

$('.faqBlock').click(function() {
  var relative = $(this);
  if (!relative.hasClass('opened')) {
    $('.opened').removeClass('opened').next('.infoFaqContainer').slideUp(500);
    relative.addClass('opened').next('.infoFaqContainer').slideDown();
    $('.infoTitles:before').addClass('opened'); //this is where I am adding the class for the icon
  } else {
    relative.removeClass('opened').next('.infoFaqContainer').slideUp(500);
  }
  return false;
});

.faqTitle {
	font-size: 1.8rem;
	margin-bottom: 50px;
}
.faqCont {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #2E393F;
}
.faqBlock {
	width: 100%;
	padding: 40px 0;
	cursor: pointer;
}
.infoTitles {
	color: #2E393F;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.5rem;
}
.infoTitles:before {
	content: '';
	vertical-align: bottom;
	float: left;
	margin-right: 8px;
	background-image: url('https://www.colourbox.com/preview/5697410-icon-plus-black.jpg');
	background-size: 15px 15px;
	width: 15px;
	height: 15px;
	display: block;
}
.opened .infoTitles:before {
	content: '';
	vertical-align: bottom;
	float: left;
	margin-right: 8px;
	background-image: url('https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/minus-big-512.png');
	background-size: 15px 15px;
	width: 15px;
	height: 15px;
	display: block;
}
.infoFaqContainer {
	display: none;
}
.infoFaqInner {
	padding: 0 5px 40px 5px;
}
.faqDesc {
	font-family: 'Open-sans', sans-serif;
	font-size: 1rem;
	/*letter-spacing: .1rem;*/
	line-height: 1.5em;
	color: #2E393F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="weddingInfoBlock">
<div class="wInfoBlockCont">
  <span class="wIBCTitle">FAQ's</span>
  <div class="faqCont">
    <div class="faqBlock">
      <div class="infoTitles">Title</div>
    </div>	
    <div class="infoFaqContainer">
      <div class="infoFaqInner">
        <p class="faqDesc">
          Text
        </p>
      </div>
    </div>
  </div>
</div>