Question

我的崩溃/扩展效果需要一些指导。我的代码如下。

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

}

Jquery的：

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");

        });



    });
});

expand/collapse all按预期工作，但每个人Respond to comment/hide form都没有，而我希望这样做也能正常工作。

非常感谢任何帮助。

Answer 1

你的代码有点乱。我试图快速清理它，但要做得更好还有很多工作要做。看看Javascript“最佳实践”。

提示：

许多不必要的HTML元素
使用功能
缓存jQuery选择器
考虑一个javascript设计模式

工作解决方案： jsFiddle

JS：

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");
          }
        });


    });
});

HTML：

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

Jquery崩溃扩展效果

1 个答案: