想要在打開幻燈片之前看到一些單詞

即使在關閉切換時，我也想顯示前20-30個單詞。我的代碼如下。想要在打開幻燈片之前看到一些單詞

在輸出頁面上，我想先顯示幾個字，然後當有人點擊圖標或按鈕時，它應該顯示完整的內容，再次單擊時，它應該只顯示前20個-30字。

的JavaScript/jQuery的：

$(document).ready(function(){ 
    $("a#abdptext13").click(function(){ 
    $("#abpanel13").slideToggle(1000); 
    return false; 
    }); 
});

CSS：

#abpanel13{ 
    padding: 10px; 
    display: none; 
    max-width:600px; 
    padding-left:25px; 
    text-align:justify; 
}

HTML：

<div> 
<a href="#droptext" id="abdptext13"><img src="images/textdrop_03.png" width="35" height="62" align="right" id="flip"></a> 
</div> 
<div id="abpanel13"> 
Click to slide down panelClick to slide down panelClick to slide down 
panelClick to slide down panelClick to slideClick to slide down panelClick 
to slide down panelClick to slide down panelClick to slide down panelClick 
to slideClick to slide down panelClick to slide down panelClick to slide 
down panelClick to slide down panelClick to slideClick to slide down 
panelClick to slide down panelClick to slide down panelClick to slide down 
panelClick to slideClick to slide down panelClick to slide down panelClick 
to slide down panelClick to slide down panelClick to slideClick to slide 
down panelClick to slide down panelClick to slide down panelClick to slide 
down panelClick to slideClick to slide down panelClick to slide down 
panelClick to slide down panelClick to slide down panelClick to slideClick 
to slide down panelClick to slide down panelClick to slide down panelClick 
to slide down panelClick to slideClick to slide down panelClick to slide 
down panelClick to slide down panelClick to slide down panelClick to slide 
</div>

來源

2016-06-21 djmhim

-1

已修改上面的代碼段中，除去額外的div和包括一個標誌。代碼片段顯示基於像素的文本。希望這可以滿足您的要求。

var down = 0; 
 
$(document).ready(function() { 
 
    var initHeight = $("#abpanel13").css('height'); 
 
    $("#abpanel13").css('height', '50px'); 
 

 
    $("a#abdptext13").click(function() { 
 

 
    if (!down) { 
 
     $('#abpanel13').animate({ 
 
     height: initHeight 
 
     }, 'slow', function(e) {}); 
 
     down = 1; 
 
    } else { 
 
     $('#abpanel13').animate({ 
 
     height: '50px' 
 
     }, 'slow', function(e) {}); 
 
     down = 0; 
 
    } 
 
    }); 
 

 
});

#abpanel13 { 
 
    padding: 10px; 
 
    display: block; 
 
    max-width: 600px; 
 
    padding-left: 25px; 
 
    text-align: justify; 
 
    overflow: hidden; 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div> 
 
    <a href="#droptext" id="abdptext13">Click Here</a> 
 
    </div> 
 
    <div id="abpanel13"> 
 
    Click to slide down panelClick to slide down panelClick to slide down panelClick to slide down panelClick to slideClick to slide down panelClick to slide down panelClick to slide down panelClick to slide down panelClick to slideClick to slide down panelClick 
 
    to slide down panelClick to slide down panelClick to slide down panelClick to slideClick to slide down panelClick to slide down panelClick to slide down panelClick to slide down panelClick to slideClick to slide down panelClick to slide down panelClick 
 
    to slide down panelClick to slide down panelClick to slideClick to slide down panelClick to slide down panelClick to slide down panelClick to slide down panelClick to slideClick to slide down panelClick to slide down panelClick to slide down panelClick 
 
    to slide down panelClick to slideClick to slide down panelClick to slide down panelClick to slide down panelClick to slide down panelClick to slideClick to slide down panelClick to slide down panelClick to slide down panelClick to slide down panelClick 
 
    to slide 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2016-06-22 09:28:29

你好史蒂芬Dsoza，感謝您的答案，但它根本不工作.. Atchully我想它像一個箭頭的形象，當有人點擊它，在頁面上的某個地方，一個peragraph打開順利，當再次點擊時，它會關閉，但應該打開50-60px並休息關閉...... – djmhim

「點擊鏈接時，會打開該段落，然後在下一次點擊時關閉該段落並保持僅50-60px（當前以上是15px）的整個div塊「 - 這是你需要什麼？我猜上面的代碼是一樣的。請讓我知道什麼不適合你，因爲在演示中它的工作正常。 –

將上面的代碼修改爲50px –

這個片段可滿足您的要求。

$(document).ready(function(){ 
 
    var content = $("#abpanel13").html(); 
 
    var c = content.substr(0, 30); 
 
    $("#abpanel13temp").html(c); 
 
$("a#abdptext13,#abpanel13temp").click(function(){ 
 
    $("#abpanel13").slideToggle(1000); 
 
    
 
    $("#abpanel13temp").slideToggle(0); 
 
    return false; 
 
    }); 
 
});

#abpanel13{ 
 
padding: 10px; 
 
display: none; 
 
max-width:600px; 
 
padding-left:25px; 
 
text-align:justify;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<a href="#droptext" id="abdptext13">Click Here</a> 
 
</div> 
 
<div id="abpanel13temp"> 
 
</div> 
 
<div id="abpanel13"> 
 
Click to slide down panelClick to slide down panelClick to slide down 
 
panelClick to slide down panelClick to slideClick to slide down panelClick 
 
to slide down panelClick to slide down panelClick to slide down panelClick 
 
to slideClick to slide down panelClick to slide down panelClick to slide 
 
down panelClick to slide down panelClick to slideClick to slide down 
 
panelClick to slide down panelClick to slide down panelClick to slide down 
 
panelClick to slideClick to slide down panelClick to slide down panelClick 
 
to slide down panelClick to slide down panelClick to slideClick to slide 
 
down panelClick to slide down panelClick to slide down panelClick to slide 
 
down panelClick to slideClick to slide down panelClick to slide down 
 
panelClick to slide down panelClick to slide down panelClick to slideClick 
 
to slide down panelClick to slide down panelClick to slide down panelClick 
 
to slide down panelClick to slideClick to slide down panelClick to slide 
 
down panelClick to slide down panelClick to slide down panelClick to slide 
 
</div>

來源

2016-06-21 11:28:31

你好Divyesh，這並不順暢，因爲它應該，我能有什麼解決方案，使其順利開啓和關閉？有一次，當我們點擊關閉時，abpanel1temp和abpanel1都會出現。在此先感謝 – djmhim

想要在打開幻燈片之前看到一些單詞

回答

相關問題