jQuery - 显示更少/更多，在“显示更多”之前上升和下降，反之亦然答案

【问题标题】：jQuery - Show Less/More, Going up and Down before "Show More" and Vice VersajQuery - 显示更少/更多，在“显示更多”之前上升和下降，反之亦然
【发布时间】：2016-09-28 03:56:43
【问题描述】：

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

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

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>

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

我从这里的回复帖子中得到这个脚本： https://stackoverflow.com/a/38680734/5118751 该脚本在 Jsfiddle 上运行良好，当我直接在 html 上加载脚本时也是如此。

【问题讨论】：

html 段落中没有太多内容 - 显示更多内容不会展开，因为它会显示所有内容..

标签： jquery css

【解决方案1】：

首先要解决这个问题，因为您没有 html 中有很多内容.. 所以显示更多不会展开。就像它一样显示所有内容。
其次 - 你将 JavaScript 和 jQuery 混合在一起......当你正在使用 jQuery 获取按钮类为什么需要 onclick=ssss() 我进行了更改，请参见下面的代码 sn-p - 及其为我工作..

$(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>

希望这会有所帮助。如果您的问题已解决，请将其标记为 nswered 。

【讨论】：

我不知道出了什么问题，它仍然无法正常工作..我直接放在 HTML 页面上它正在工作..但是如果我从 wp_equeue 加载它就不能再工作了..

【解决方案2】：

没有必要为您的按钮添加 onclick 功能，因为您将按钮类分配给 btn on click 功能。

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>

【讨论】：

我不知道出了什么问题，它仍然无法正常工作..我直接放在 HTML 页面上它正在工作..但是如果我从 wp_equeue 加载它就不能再工作了..

【解决方案3】：

谢谢你，先生。我刚刚阅读了 HussainPatel 的帖子，我混合了 jQuery 和 Javascript，我开始在谷歌上搜索如何加载 jQuery 并找到了这篇帖子 https://stackoverflow.com/a/22239396/5118751。

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

非常感谢你。

【讨论】：