在jQuery中展开全部并全部折叠不按要求工作

Question

我是 jQuery 新手，我在下面创建了一个页面，并具有用于展开折叠的 jquery 功能。除了以下事实之外，一切都运行良好展开，我正在展开所有然后它正在展开其余的 div，但折叠已经展开的元素，反之亦然。请建议如何解决这个问题。谢谢。

javascript:

    $(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();
          });
        });

html:

<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

这可能是你的答案，你正在寻找什么..!!