JQuery：使用加号和减号图标切换Q＆amp; A类

Question

我正在尝试切换加号和减号，并同时切换答案div并且无法解决问题。 我构建了html，所以问题div有两个孩子：

1. 带有加号和减号图标的两个孩子的div图标
2. div为答案

这是代码：

＆＃13;
＆＃13;
$( document ).ready(function() {
  $(".question").click(function(){
    $(this).children(".icons div").toggle();
	  $(this).next('.answer').slideToggle();			    	
	});
});
＆＃13;
.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%;
}
＆＃13;
<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="answer">
			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="answer">
			ANSWER<br> ANSWER<br> ANSWER<br> ANSWER
		</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

试试这个：

  $( document ).ready(function() {
            $(".question").click(function(){            

                $(this).find(".plusIcon").toggle();
                $(this).find(".MinusIcon").toggle();    
                $(this).next('.answer').slideToggle();
            });

        });

Answer 2

更改您的功能

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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="answer">
			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="answer">
			ANSWER<br> ANSWER<br> ANSWER<br> ANSWER
		</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

1. 只使用plusIcon

   的单个div

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

2. 使用以下命令切换minusIcon类：

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

+＆amp; - 图标由CSS中的伪元素提供：

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

您可以在http://jsfiddle.net/d1cot84e/1/

找到完整的解决方案

Answer 4

对OP代码的修改很少，这就是它的外观：

＆＃13;

＆＃13;

  $(".question").on('click', function() {
    var $answer = $(this).next('.answer');
    var visible = $answer.is(':visible');
    $(this).children('.icons').text(visible ? '[+]' : '[-]');
    $answer.slideToggle();
  });

＆＃13;

.question div {
  display: table-cell;
  font-size: 17px;
  font-weight: bold;
  color: blue;
  cursor: pointer;
}
.answer {
  display: none;
  padding-left: 5%;
}

＆＃13;

<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="answer">
  ANSWER
  <br>ANSWER
  <br>ANSWER
  <br>ANSWER
</div>
<div class="question">
  <div class="icons">[+]</div>
  <div>
    Question
  </div>
</div>
<div class="answer">
  ANSWER
  <br>ANSWER
  <br>ANSWER
  <br>ANSWER
</div>

＆＃13;

＆＃13;

＆＃13;