Jquery 折叠展开效果

Jquery collapse expand effect

本文关键字：折叠 Jquery      更新时间：2023-09-26

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

<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没有，而我也希望它也能工作。

任何帮助都非常感谢。

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

小贴士：

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

工作解决方案：js小提琴

.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>
相关文章：