jQuery：使用加号和减号图标切换问答类

Question

I am trying to toggle plus and minus span and also toggle the answer div all at once and its not working out. I built the html so the question div has two childrens:

1. div icons with two children of plus and minus icons
2. div for the answer

this is the code:

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

Try this :

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

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

        });

Answer 2

Change Your Function

$(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="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 3

You could achieve toggling the +/- icons along with the answers div by doing the following in your code:

1. Use a single div with just the plusIcon

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

2. Toggle the minusIcon class on click using:

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

The + & - icons are provided by pseudo elements from CSS:

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

You can find the complete solution here http://jsfiddle.net/d1cot84e/1/

Answer 4

With little modifications in OP's code, here's how it looks:

  $(".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="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>