Question

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

我使用伪:before填充图像。在我的javascript中，我试图让减号符号加上＆＃39;使用addClass函数添加类opened的位置。但是，我的尝试失败了。这是我尝试添加类的地方：

.infoTitles:before.open

有人看到我做错了吗？

＆＃13;

$('.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;
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

2）该类未添加到伪元素中，这就是css的结构 - 它被添加到父级。

基本上规则需要改变：

.infoTitles:before.open {

到

.opened .infoTitles:before {

以下完整代码段：

＆＃13;

$('.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;
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

在 faqBlock div top目标上使用已打开类的内部图标。即当 faqBlock 没有打开类时，在子选择器中显示加号图标，当 faqBlock 打开时class显示减号图标将此添加到我们css

 .faqBlock .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;
}
.faqBlock.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;
}

jsfiddle Link

如何将addClass函数用于伪：在点击

2 个答案: