JQuery:切换问答;带有加号和减号图标的类

JQuery: toggle Q&A class with plus and minus icons

本文关键字：图标 问答 JQuery      更新时间：2023-09-26

我正在尝试切换加号和减号跨度，同时切换答案div，但没有成功。我构建了html，因此问题div有两个子级：

  1. 带有加号和减号两个子项的div图标
  2. div表示答案

这是代码：

$( document ).ready(function() {
  $(".question").click(function(){
    $(this).children(".icons div").toggle();
	  $(this).next('.answer').slideToggle();			    	
	});
});
.question div{
  display: table-cell;
  font-size: 17px;
  font-weight: bold;
  color:blue;
  cursor: pointer;
}
.question .icons .MinusIcon{
  display: none;
}
.answer{
  display:none;
  padding-left: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---------------1--------------->
		<div class="question">
			<div class="icons">
				<div class="plusIcon">[<span>+</span>]</div>
				<div class="MinusIcon">[<span>-</span>]</div>
			</div>
			<div>
				Question<br>Question
			</div>
		</div>
		<div class="answerswer">
			ANSWER<br> ANSWER<br> ANSWER<br> ANSWER
		</div>
		<!---------------2--------------->
		<div class="question">
			<div class="icons">
				<div class="plusIcon">[<span>+</span>]</div>
				<div class="MinusIcon">[<span>-</span>]</div>
			</div>
			<div>
				Question<br>Question
			</div>
		</div>
		<div class="answerswer">
			ANSWER<br> ANSWER<br> ANSWER<br> ANSWER
		</div>

试试这个：

  $( document ).ready(function() {
            $(".question").click(function(){            
                $(this).find(".plusIcon").toggle();
                $(this).find(".MinusIcon").toggle();    
                $(this).next('.answer').slideToggle();
            });
        });

更改您的功能

$(this).find(".icons div.plusIcon").toggle();
$(this).find(".icons div.MinusIcon").toggle();


$( document ).ready(function() {
		    $(".question").click(function(){
		    	$(this).find(".icons div.plusIcon").toggle();
$(this).find(".icons div.MinusIcon").toggle();
		    	$(this).next('.answer').slideToggle();			    	
		    });
 
	 	});
.question div{
  display: table-cell;
  font-size: 17px;
  font-weight: bold;
  color:blue;
  cursor: pointer;
}
.question .icons .MinusIcon{
  display: none;
}
.answer{
  display:none;
  padding-left: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---------------1--------------->
		<div class="question">
			<div class="icons">
				<div class="plusIcon">[<span>+</span>]</div>
				<div class="MinusIcon">[<span>-</span>]</div>
			</div>
			<div>
				Question<br>Question
			</div>
		</div>
		<div class="answerswer">
			ANSWER<br> ANSWER<br> ANSWER<br> ANSWER
		</div>
		<!---------------2--------------->
		<div class="question">
			<div class="icons">
				<div class="plusIcon">[<span>+</span>]</div>
				<div class="MinusIcon">[<span>-</span>]</div>
			</div>
			<div>
				Question<br>Question
			</div>
		</div>
		<div class="answerswer">
			ANSWER<br> ANSWER<br> ANSWER<br> ANSWER
		</div>

只需对OP的代码进行少量修改，它的外观如下：

  $(".question").on('click', function() {
    var $answer = $(this).next('.answer');
    var visible = $answer.is(':visible');
    $(this).children('.icons').text(visible ? '[+]' : '[-]');
    $answer.slideToggle();
  });
.question div {
  display: table-cell;
  font-size: 17px;
  font-weight: bold;
  color: blue;
  cursor: pointer;
}
.answer {
  display: none;
  padding-left: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
  <div class="icons">[+]</div>
  <div>
    Question
  </div>
</div>
<div class="answerswer">
  ANSWER
  <br>ANSWER
  <br>ANSWER
  <br>ANSWER
</div>
<div class="question">
  <div class="icons">[+]</div>
  <div>
    Question
  </div>
</div>
<div class="answerswer">
  ANSWER
  <br>ANSWER
  <br>ANSWER
  <br>ANSWER
</div>

您可以通过在代码中执行以下操作来实现+/-图标和答案div的切换：

  1. 将单个div与plusIcon 一起使用

    <div class="icons"> <div class="plusIcon"></div> </div>

  2. 点击时切换minusIcon类使用：

    $(this).find(".icons div").toggleClass("minusIcon");

+和-图标由CSS中的伪元素提供：

.plusIcon:before {
  content: "[+]";
  width: 22px;
  height: 22px;
}
.minusIcon:before {
 content: "[-]";
 width: 22px;
 height: 22px;
}

你可以在这里找到完整的解决方案http://jsfiddle.net/d1cot84e/1/

相关文章：