jQuery - 顯示更少/更多，在「顯示更多」和副本之前上下移動

有人可以幫我解決這個問題嗎？我只是學習CSS和Js，所以我不知道該怎麼做。jQuery - 顯示更少/更多，在「顯示更多」和副本之前上下移動

這件事情在顯示內容前上下兩下，然後在隱藏內容前再次上下。

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上加載腳本時。

來源

2016-09-28 lllkyo

你沒有在HTML段落太多的內容。 - 顯示更不會擴大，因爲它顯示的所有內容.. –

首先第一件事情 - 因爲你不必須在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>

希望這有助於。如果您的問題已修復，請將其標記爲已答覆。

來源

2016-09-28 04:46:13

我不知道什麼錯，它仍然不工作..我直接放在HTML頁面它的工作..但如果我從wp_equeue加載它不再工作.. – lllkyo

您不需要爲按鈕添加onclick函數，因爲您正將按鈕類分配給btn的點擊功能。

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

 
if(h > 120) { 
 
\t btn.addClass('less'); 
 
\t 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>

來源

2016-09-28 04:36:08

我不知道什麼錯，它仍然不工作.. 我直接放在HTML頁它的工作..但如果我從wp_equeue加載它不能再工作.. – lllkyo

謝謝你，先生。我只是從HussainPatel閱讀文章，我混合jQuery和Javascript，我開始googling如何加載jQuery，並發現這個職位https://stackoverflow.com/a/22239396/5118751。

我最大的錯誤是我不把數組（jQuery）加載時。 :(... 現在一切正常

非常感謝您

來源

2016-09-28 08:56:38 lllkyo

jQuery - 顯示更少/更多，在「顯示更多」和副本之前上下移動

回答

相關問題