閱讀更多/讀少

我不知道什麼是錯我的代碼：閱讀更多/讀少

$(document).ready(function(){ 

var adjustheight = 80; 
var moreText = "+ read more"; 
var lessText = "- less text"; 

$("div.posted_post .more-block").css('height', adjustheight).css('overflow', 'hidden'); 
$("div.posted_post").append('[...]'); 

$("a.show").text(moreText); 

$(".show").toggle(function() 
    { 
     $(this).find(".more-block").css('height', 'auto').css('overflow', 'visible'); 
     $(this).text(lessText); 
    }, function(){ 
     $(this).find(".more-block").css('height', adjustheight).css('overflow', 'hidden'); 
     $(this).text(moreText); 
    }); 
});

的HTML如下：

<div class="posted_post"> 
    <div class="more-block"> 
     <p>The Content</p> 
      <a class="show"></a> 
    </div> 
</div>

當我加載頁面的顯示更多按鈕顯示，但在第二個它隱藏什麼是錯的？

來源

2013-02-19 emcee22

你的HTML缺少a.show部分。另外，我對$（this）.find（「。more-block」）非常困惑，這表明a.show吞沒了整個模塊 – jbl 2013-02-19 10:29:12

不能理解你到底想要做什麼。如果你提供更多的信息（比如身體標籤數據），效果會更好 – 2013-02-19 10:30:25

有些CSS會對更多的html有幫助。我認爲這可能是一個CSS問題。 – Hendeca 2013-02-19 10:33:01

您嘗試使用jQuery的1.9已被刪除的切換（因爲1.8不建議使用）

看到http://api.jquery.com/toggle-event/

那麼通過調用切換，你真的切換你的元素（如您正在使用jq1.9）

BTW：

$(this).find(".more-block")

不會返回任何東西。

它應該是：

$(this).closest(".more-block")

您可以嘗試這樣的事：

$(document).ready(function(){ 

var adjustheight = 80; 
var moreText = "+ read more"; 
var lessText = "- less text"; 

$("div.posted_post .more-block").css('height', adjustheight).css('overflow', 'hidden'); 
$("div.posted_post").append('[...]'); 

$("a.show").text(moreText); 

$(".show").click(function() 
    { 
     if($(this).text()===lessText) 
     { 
      $(this).closest(".more-block").css('height', adjustheight).css('overflow', 'hidden'); 
      $(this).text(moreText); 
     } 
     else 
     { 
      $(this).closest(".more-block").css('height', 'auto').css('overflow', 'visible'); 
      $(this).text(lessText); 
     } 
    }); 
});

來源

2013-02-19 10:48:33 jbl

感謝您的提示......以及如何更改切換功能？ – emcee22 2013-02-19 11:05:07

@PaulHarbuz更新了我的答案。希望這將有助於 – jbl 2013-02-19 11:59:55

現在，它在閱讀更多內容和閱讀更少內容之間切換......但是div並不存在： - ?? – emcee22 2013-02-19 12:04:50

你實際上並沒有創建按鈕。你需要做的

$('<a class="show"/>').text(moreText).appendTo('.posted_post').

如果你有一個以上的職位雖然，你需要循環他們創造更多的鏈接。例如：

$("div.posted_post").each(function() { 
    // create more links and set CSS.

來源

2013-02-19 10:24:16 Echilon

是的，我有錨，但我忘了複製並粘貼它 – emcee22 2013-02-19 10:27:38

當我使用每個...它使botton撥動一次forpostpos，然後停止...... WEIRD！ – emcee22 2013-02-19 10:28:11

閱讀更多/讀少

回答

相關問題