Question

有人可以帮我解决这个问题吗？我只是学习CSS和Js所以我真的不知道该怎么做。

这个东西在显示内容之前上下2次，然后再次上下移动，然后隐藏内容。

CSS：

   .pureyad {
        max-width: 600px;
        line-height: 1.1em;
        font-family: 'Roboto Slab';
        overflow: hidden;
        background: #46988f;
        font-size: 14px;
        height: 120px;
        padding-left: 20px
    }

    .purgex {
        display: block;
        background: transparent;
        border: none;
        border-top: 1px solid #222;
        width: 585px;
        max-width: 100%;
        font-family: 'baloo bhai';
        font-size: 15px
    }

JS：

function ssss() {
var text = $('.pureyad'),
     btn = $('.purgex'),
       h = text[0].scrollHeight; 

        if(h > 120) {
        btn.addClass('less');
    }

    btn.click(function(e) 
    {
    e.stopPropagation(); 

    if (btn.hasClass('less')) {
        btn.removeClass('less');
        btn.addClass('more');
        btn.text('Show less');

      text.animate({'height': h});
  } else {
            btn.addClass('less');
            btn.removeClass('more');
            btn.text('Show more');
            text.animate({'height': '120px'});
        }  
    });
}

HTML：

    <div class="pureyad">
<p>Lorem ipsum dolor sit amet..</p>
                </div>
<center><button class="purgex" onclick="ssss()">Show more</button></center>

Gif上下：http://i.giphy.com/l0HlJmVHLDGnSZWuY.gif

我从这里的回复帖子中得到这个脚本： https://stackoverflow.com/a/38680734/5118751 该脚本在Jsfiddle上工作正常，当我直接在html上加载脚本时。

Answer 1

在点击功能上为btn指定按钮类时，无需为按钮添加onclick功能。

var text = $('.pureyad'),
     btn = $('.purgex'),
       h = text[0].scrollHeight; 

if(h > 120) {
	btn.addClass('less');
	btn.css('display', 'block');
}

btn.click(function(e) 
{
  e.stopPropagation();

  if (btn.hasClass('less')) {
      btn.removeClass('less');
      btn.addClass('more');
      btn.text('Show less');

      text.animate({'height': h});
  } else {
      btn.addClass('less');
      btn.removeClass('more');
      btn.text('Show more');
      text.animate({'height': '120px'});
  }  
});

   .pureyad {
        max-width: 600px;
        line-height: 1.1em;
        font-family: 'Roboto Slab';
        overflow: hidden;
        background: #46988f;
        font-size: 14px;
        height: 120px;
        padding-left: 20px
    }

    .purgex {
        display: block;
        background: transparent;
        border: none;
        border-top: 1px solid #222;
        width: 585px;
        max-width: 100%;
        font-family: 'baloo bhai';
        font-size: 15px
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pureyad">
<p>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet..</p>
                </div>
<center><button class="purgex">Show more</button></center>

Answer 2

首先要做的事情 - 你面对的是这个问题，因为你没有在html中有很多内容..所以显示更多不会扩展。就像它一样显示所有内容。
其次 - 你将JavaScript和jQuery混合在一起..当你正在使用jQuery获取按钮类为什么需要 onclick = ssss（）我做了更改，见下面的代码片段 - 及其为我工作..

$(document).ready(function(){
var text = $('.pureyad'),
     btn = $('.purgex'),
       h = text[0].scrollHeight; 

        if(h > 120) {
        btn.addClass('less');
    }
    btn.click(function(e) 
    {
    e.stopPropagation(); 

    if (btn.hasClass('less')) {
        btn.removeClass('less');
        btn.addClass('more');
        btn.text('Show less');

      text.animate({'height': h});
  } else {
            btn.addClass('less');
            btn.removeClass('more');
            btn.text('Show more');
            text.animate({'height': '120px'});
        }  
    });

});

 .pureyad {
        max-width: 600px;
        line-height: 1.1em;
        font-family: 'Roboto Slab';
        overflow: hidden;
        background: #46988f;
        font-size: 14px;
        height: 120px;
        padding-left: 20px
    }

    .purgex {
        display: block;
        background: transparent;
        border: none;
        border-top: 1px solid #222;
        width: 585px;
        max-width: 100%;
        font-family: 'baloo bhai';
        font-size: 15px
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pureyad">
<p>Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
   fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
    fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
    fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
df
ds
fsdfsdfdsfds

fsdf
f

fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
df
ds
fsdfsdfdsfds

fsdf
f

fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
df
ds
fsdfsdfdsfds fsdf
f
fdfsdfdsfdLorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
df
ds
fsdfsdfdsfds

fsdf
f

fdfsdfdsfd
ds
fsdfsdfdsfds

fsdf
f

fdfsdfdsfd
</p>
                </div>
<center><button class="purgex">Show more</button></center>

希望这会有所帮助。如果问题得到解决，请将此标记为已解决。

Answer 3

谢谢你，先生。我只是阅读HussainPatel的帖子，我混合了jQuery和Javascript，我开始用谷歌搜索如何加载jQuery并发现这篇文章https://stackoverflow.com/a/22239396/5118751。

我最大的错误是我在加载时不放数组（jQuery）。 :( ... 现在一切正常。

非常感谢你。

jQuery - 显示更少/更多，在“显示更多”之前上下起伏和反之亦然

3 个答案: