javascript - JQuery:使用加号和减号图标切换问答类

Question

我正在尝试同时切换加号和减号跨度并切换答案 div，但没有成功。 我构建了 html，所以问题 div 有两个 child :

1. 带有加号和减号图标两个 child 的 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="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>

Answer 1

试试这个:

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

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

        });