Jquery崩溃扩展效果

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

     }); 



    }); 
}); 

如预期，但每一个人Respond to comment/hide form不同时，我想，要和工作expand/collapse all工作。

任何帮助，非常感谢。

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>