jquery readmore和less切换[重复]答案

【问题标题】：jquery readmore and less toggle [duplicate]jquery readmore和less切换[重复]
【发布时间】：2016-10-14 18:42:21
【问题描述】：

当我点击“更多”时，它可以工作，但屏幕会显示在顶部。它最后也显示“关闭”。再次单击关闭后，它仍然是“关闭”。我希望它返回“更多”。我该怎么做？

<p class="disp-cont">
    Several Australian home owners have been utilizing the services of mortgage brokers to fulfill their dreams of owning a house at an affordable rate.
</p>
<p class="more-cont" style="display:none;">
    Whether you are aspiring to buy a new house or considering upgrading your existing home loan, an expert mortgage broker can help you achieve your objective in the simplest and easiest way! For the uninitiated, here’s a sneak peek on <strong>what is mortgage broking?</strong><br>
    Mortgage broking involves the act of intermediating between the borrower and the lender (bank & non-bank). While on one hand, the loan specialist assists the borrower to qualify for a mortgage, on the other hand, he negotiates with the lender on the borrower’s behalf. The role of mortgage broker starts right from the time when you plan to explore your options of financing/refinancing till the deal is finalized. 
</p>
<a href="#" class="more">more</a>

$('.more').click(function() {
    $(this).prev('.more-cont').slideToggle();
    $(this).html('close');
});

【问题讨论】：

请添加一个有效的 jsfiddle
我正在学习 jquery。什么是 jsfiddle
看起来你被分配了一个任务。这是小提琴：jsfiddle.net
它是一个非常棒的在线原型设计 html/css/js 的工具。您可以保存草稿并与其他人共享链接，例如 stackoverflow。 jsfiddle.net
所以我必须在这做些什么

标签： jquery

【解决方案1】：

要停止将滚动位置移动到页面顶部，请在传递给单击处理程序的事件上调用preventDefault()。要切换文本，您可以向text() 提供一个函数，该函数根据当前文本设置值。试试这个：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="disp-cont">
  Several Australian home owners have been utilizing the services of mortgage brokers to fulfill their dreams of owning a house at an affordable rate.
</p>
<p class="more-cont" style="display:none;">
  Whether you are aspiring to buy a new house or considering upgrading your existing home loan, an expert mortgage broker can help you achieve your objective in the simplest and easiest way! For the uninitiated, here’s a sneak peek on <strong>what is mortgage broking?</strong>
  <br>Mortgage broking involves the act of intermediating between the borrower and the lender (bank & non-bank). While on one hand, the loan specialist assists the borrower to qualify for a mortgage, on the other hand, he negotiates with the lender on the
  borrower’s behalf. The role of mortgage broker starts right from the time when you plan to explore your options of financing/refinancing till the deal is finalized.
</p>
<a href="#" class="more">more</a>

<p class="disp-cont">
  Several Australian home owners have been utilizing the services of mortgage brokers to fulfill their dreams of owning a house at an affordable rate.
</p>
<p class="more-cont" style="display:none;">
  Whether you are aspiring to buy a new house or considering upgrading your existing home loan, an expert mortgage broker can help you achieve your objective in the simplest and easiest way! For the uninitiated, here’s a sneak peek on <strong>what is mortgage broking?</strong>
  <br>Mortgage broking involves the act of intermediating between the borrower and the lender (bank & non-bank). While on one hand, the loan specialist assists the borrower to qualify for a mortgage, on the other hand, he negotiates with the lender on the
  borrower’s behalf. The role of mortgage broker starts right from the time when you plan to explore your options of financing/refinancing till the deal is finalized.
</p>
<a href="#" class="more">more</a>

【讨论】：

非常感谢。代码现在可以工作了
如果我想在一页中进行多个切换。我应该使用什么
我是stackoverflow的新手，所以我不知道upvote/accept
我可以在
标签中使用
几位澳大利亚房主一直在利用抵押贷款经纪人的服务来实现他们以负担得起的价格拥有房屋的梦想。

无论您是想买新房还是考虑升级现有房屋贷款，专业的抵押贷款经纪人都可以帮助您实现
更多

【解决方案2】：

你在正确的轨道上，但是

对于问题 1：替换

<a href="#" class="more">more</a>

与

<a href="javascript:void(0)" class="more">more</a>

对于问题 2：

$('.more').click(function() {
  $(this).prev('.more-cont').slideToggle();
  $(this).html($(this).html()=='close'?'more':'close');
});

【讨论】：

【解决方案3】：

HTML：

<html>
  <head>
    <title>jQuery Read More/Less Toggle Example</title>
  </head>
  <body>
    <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
    <br><br>
    <div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
    </div>
  </body>
</html>

CSS：

.morecontent span {
    display: none;
}
.morelink {
    display: block;
}

JQuery：

$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";


    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

可以看demohere

【讨论】：

投票不是我的，但这与 OP 给出的代码示例无关，而且逻辑充其量也很差。
好的没问题，我只是提供了示例脚本，我想这就是我投反对票的原因:(