展开全部并在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

这可能是你的答案，你找到的...... !!