JQuery 切换显示隐藏

Question

我正在努力为我的文章创建一个阅读更多选项。我参考了 jQuery 文档并尝试了以下方法。但是我想在点击阅读更多内容时隐藏 .disp-cont class 中的内容。并仅在 'read less' 单击时显示。

请指教如何调整以下代码

<div class="row">
                                        <div class="col-md-12"><strong>subject</strong></div>
                                        <div class="disp-cont col-md-auto">
                                             Lorem Ipsum is simply dummy text of the printing an
                                        </div>
                                        <div class="more-cont col-md-auto" style="display:none;">
                                          
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                                        </div>
                                        <a href="#" class="more col-md-auto">read more</a>
                                   
                                    <div class="col-md-12">no record</div>
                                    
                                </div>

//切换阅读更多

$(document).ready(function () {
        $('.row .more').click(function(e) {
                 e.preventDefault();
            $(this).text(function(i, t) {
            return t == 'read less' ? 'read more' : 'read less';
            }).prev('.row .more-cont').slideToggle()
        });
    });

Answer 1

您应该尝试以下代码：

$(document).ready(function () {
        $('.row .more').click(function(e) {
            e.preventDefault();
            
            if ($(this).text() == 'read more') {
                $(this).prev('.row .more-cont').show();
                $(this).prev('.row .disp-cont').hide();
            } else {
                $(this).prev('.row .more-cont').hide();
                $(this).prev('.row .disp-cont').show();                 
            }

            $(this).text(function(i, t) {
                return t == 'read less' ? 'read more' : 'read less';
            });
        });
    });

Answer 2

您可以尝试在显示其他“more-cont”之前切换“disp-cont”；

因此，它会创建在两个内容之间切换的外观。

试试下面的代码片段：

$(document).ready(function () {
    $('.row .more').click(function(e) {
             e.preventDefault();
             $( "#lessText" ).slideToggle()
        $(this).text(function(i, t) {
          return t == 'read less' ? 'read more' : 'read less';
        }).prev('.row .more-cont, .row .more-cont').slideToggle()
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <div class="col-md-12"><strong>subject</strong></div>
   <div id="lessText" class="disp-cont col-md-auto">
      Lorem Ipsum is simply dummy text of the printing an
   </div>
   <div id="moreText" class="more-cont col-md-auto" style="display:none;">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
   </div>
   <a href="#" class="more col-md-auto">read more</a>
   <div class="col-md-12">no record</div>
</div>

JQuery 切换显示隐藏

JQuery Toggle show hide

jquery

toggle