Javascript Jquery折叠扩展效应

需要一些关于我的折叠/扩展效果的指导。我的代码如下

<div class="buttons">
<a class="km-collapse-forms expand-all" href="#">Expand All</a>
<a class="km-collapse-forms collapse-all hide" href="#">Collapse All</a>                    
</div>


$args = array(...);

$comments_query = new WP_Comment_Query;
$comments       = $comments_query->query( $args );  

foreach ($comments as $comment) { 

<a class="respond-to-messages expand-form" href="#<?php echo $comment->comment_ID; ?>">Respond to message</a>
<a class="respond-to-messages collapse-form hide" href="#<?php echo $comment->comment_ID; ?>">Hide form</a>

<div id="comment-<?php echo $comment->comment_ID; ?>" class="comment-respond-form post-id-<?php echo $comment->comment_post_ID; ?> hide">
    <table>
        <tr>
            <form id="custom-comments-form" action="" method="post">

                //form fields

                <button class="uk-button" type="submit">Send</button>
            </form>
        </tr>
    </table>
    </div> 

}

展开/折叠所有

按预期工作，但每个人的

回复注释/隐藏表单

不起作用，而我希望它也能工作

---

非常感谢您的帮助。

您的代码有点乱。我试着很快把它清理干净，但要让它变得更好还有很多事情要做。看看Javascript“最佳实践”

提示：

• 大量不必要的HTML元素
• 使用函数
• 缓存jQuery选择器
• 考虑一个javascript设计模式

工作解决方案：

JS:

HTML:

Lorem ipsum


发送

Lorem ipsum


发送

Lorem ipsum


发送

你能用你的代码创建一个JSFIDLE吗。[链接]我是jquery新手，所以我的代码是初级的^<代码>$（此）.text无法使用，因为文本需要在Wordpress中可翻译。这就是为什么我故意使用了

addClass/removeClass

也不能使用

$targetLi

，因为实际的代码是一个表，而不是

ul/li

。我将其添加到JSFIDLE中以使其稍微易于理解，但似乎我使其更加复杂；您仍然可以使用我的代码来理解逻辑，并查看哪里出错。只要稍作改动，你就可以工作了。

jQuery(function ($) {   
    $(document).ready(function(){

        $(".km-collapse-forms.expand-all").show();      

        $('.km-collapse-forms.expand-all').on('click',function(){   

            // Expand/Collapse All
            $( ".km-collapse-forms.expand-all" ).addClass( "hide" );
            $( ".km-collapse-forms.collapse-all" ).removeClass( "hide" );

            // Change text respond/hide form
            $( ".respond-to-messages.expand-form" ).addClass( "hide" );
            $( ".respond-to-messages.collapse-form" ).removeClass( "hide" );

            $(".comment-respond-form").slideDown("slow");

        });     

        $('.km-collapse-forms.collapse-all').on('click',function(){ 

            $( ".km-collapse-forms.collapse-all" ).addClass( "hide" );
            $( ".km-collapse-forms.expand-all" ).removeClass( "hide" );

            $( ".respond-to-messages.collapse-form" ).addClass( "hide" );
            $( ".respond-to-messages.expand-form" ).removeClass( "hide" );

            $(".comment-respond-form").slideUp("slow"); 

        }); 



        // respond/hide form text :: single comment
        // This is where I'm having trouble with
        $('.respond-to-messages.expand-form').on('click',function(){

            $(this).next( ".respond-to-messages.collapse-form" ).removeClass( "hide" );
            $(this).next( ".respond-to-messages.expand-form" ).addClass( "hide" );

            $(this).next(".comment-respond-form").removeClass("hide");
            $(this).next(".comment-respond-form").slideDown("slow");

        });


        $('.respond-to-messages.collapse-form').on('click',function(){      
            $(this).next( ".respond-to-messages.collapse-form, .comment-respond-form" ).addClass( "hide" );
            $(this).next( ".respond-to-messages.expand-form" ).removeClass( "hide" );

            $(this).prev(".comment-respond-form").addClass("hide");
            $(this).next(".comment-respond-form").slideUp("slow");

        });



    });
}); 

jQuery(function ($) {   
    $(document).ready(function () {

        var $listElem = $('.accordion-elem');
        function showAll() {
            $listElem.each(function () {
            $(this).removeClass('hiddenElements');
            $(this).find('.respond-to-messages').text('Hide form');
            $(this).find('.comment-respond-form').slideDown("slow");
          });
        }

         function hideAll() {
            $listElem.each(function () {
            $(this).addClass('hiddenElements');
            $(this).find('.respond-to-messages').text('Respond to message');
            $(this).find('.comment-respond-form').slideUp("slow");
          });
        }

        $('.all-button').on('click',function () { 
                console.log("trigger");
            if ($(this).hasClass('expanded')) {
                hideAll();
              $(this).removeClass('expanded');
              $(this).text('Expand All');
            } else {
                showAll();
              $(this).addClass('expanded');
              $(this).text('Collapse All');
            }
        });

        $('.respond-to-messages').on('click', function () {
            var $targetLi = $(this).closest('li');
            if($targetLi.hasClass('hiddenElements')) {
            //Show
            $targetLi.removeClass('hiddenElements');
            $targetLi.find('.respond-to-messages').text('Hide form');
            $targetLi.find('.comment-respond-form').slideDown("slow");
          } else {
            //hide
            $targetLi.addClass('hiddenElements');
            $targetLi.find('.respond-to-messages').text('Respond to message');
            $targetLi.find('.comment-respond-form').slideUp("slow");
          }
        });


    });
}); 

<div class="buttons">
  <a class="all-button expanded" href="#">Collapse All</a>              
</div>

<ul>
<li class="accordion-elem"> Lorem ipsum<br /><br />
  <a class="respond-to-messages" href="#">Hide form</a>
  <div id="comment-5" class="comment-respond-form">
 <table>
        <tr>
            <form id="custom-comments-form" action="" method="post">
                <textarea class="fes-cmt-body" name="newcomment_body" cols="50" rows="8"></textarea>
                <button class="uk-button" type="submit">Send</button>
            </form>
        </tr>
        </table></div>
    </li>

    <li class="accordion-elem"> Lorem ipsum<br /><br />
      <a class="respond-to-messages" href="#">Hide form</a>
      <div id="comment-6" class="comment-respond-form">
      <table>
        <tr>
            <form id="custom-comments-form" action="" method="post">
                <textarea class="fes-cmt-body" name="newcomment_body" cols="50" rows="8"></textarea>
                <button class="uk-button" type="submit">Send</button>
            </form>
        </tr>
        </table></div>
    </li>
    <li class="accordion-elem"> Lorem ipsum<br /><br />
      <a class="respond-to-messages" href="#">Hide form</a>
      <div id="comment-7" class="comment-respond-form">
       <table>
        <tr>
            <form id="custom-comments-form" action="" method="post">
                <textarea class="fes-cmt-body" name="newcomment_body" cols="50" rows="8"></textarea>
                <button class="uk-button" type="submit">Send</button>
            </form>
        </tr>
        </table></div>
    </li>
</ul>