在jQuery中展开全部和折叠全部，但未按要求工作

Question

我是jQuery的新手，我在下面创建了一个页面，并且有jQuery函数用于展开和折叠。所有的工作都很好，除了以下事实，一些子元素已经展开/折叠了，那么如果我做了全部展开/全部折叠，那么它对子元素做了相反的操作，就像我做toggle函数一样，如果子元素已经展开，而我做了全部展开，那么它将展开其余的div但折叠已经展开的元素，反之亦然。请建议如何解决这个问题。谢谢.

    $(function(){
          $('[id^=hideAns],[id^=showAns]').click(function(){
                $(this).hide();
                $(this).siblings().show();
                $(this).closest('.qbox').find('[id^=ans]').toggle(500);
          });
        });

    $(function(){
          $('[id^=showall],[id^=hideall]').click(function(){
                $(this).hide();
                $(this).siblings().show();
                $('.qbox').find('[id^=ans]').toggle(500);
                $('.qbox').find('.icons').toggle();
          });
        });

<form name="contenttemp" id="contenttemp" method="post">

<div id="contentDiv" class="wrapperBox"><br>
<span class="showHideTxt" id="showall" style="float:right; cursor:pointer;">Show all</span>
<span class="showHideTxt" id="hideall" style="float:right; display:none; cursor:pointer;">Hide all</span><br>


    <div class="qbox">

        <span class="qclass">Q. No.1)
            <img id ="showAns" class="icons" src="img/expand.png" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns" class="icons" src="img/collapse.png" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <span class="qclass">This is test question 109</span>
        <hr />
        <span style="display:none;"  id="ans">This is test answer 109</span>
    </div>
    <br>

    <div class="qbox">

        <span class="qclass">Q. No.2)
            <img id ="showAns" class="icons" src="img/expand.png" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns" class="icons" src="img/collapse.png" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <span class="qclass">This is test question 108</span>
        <hr />
        <span style="display:none;"  id="ans">This is test answer 108</span>
    </div>
    <br>

    <div class="qbox">

        <span class="qclass">Q. No.3)
            <img id ="showAns" class="icons" src="img/expand.png" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns" class="icons" src="img/collapse.png" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <span class="qclass">This is test question 105.     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        <hr />
        <span style="display:none;"  id="ans">This is test answer 105</span>
    </div>
    <br>

</div>
</form>

Answer 1

使用.hide()、.show()要比使用.toggle()...

    $(function(){
      $('[id^=showAns]').click(function(){
            $(this).hide();
            $(this).siblings().show();
            $(this).closest('.qbox').find('[id^=ans]').show(500);
      });
     $('[id^=hideAns]').click(function(){
            $(this).hide();
            $(this).siblings().show();
            $(this).closest('.qbox').find('[id^=ans]').hide(500);
      });
     $('[id^=showall]').click(function(){
            $(this).hide();
            $(this).siblings().show();
            $('.qbox').find('[id^=ans]').show(500);
            $('.qbox').find('[id^=showAns]').hide();
            $('.qbox').find('[id^=hideAns]').show();
      });
    $('[id^=hideall]').click(function(){
            $(this).hide();
            $(this).siblings().show();
            $('.qbox').find('[id^=ans]').hide(500);
            $('.qbox').find('[id^=showAns]').show();
            $('.qbox').find('[id^=hideAns]').hide();
      });
    });

请查一下..Jsfidle

这也许就是你的答案，你正在寻找的..！！