читать далее/читать меньше

Question

Я не знаю, что случилось с моим кодом:

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

, когда я загрузить страницу, показать еще кнопка но через секунду он скрывает, что здесь не так?

Answer 1

тумблер вы пытаетесь использовать был удален в JQuery 1.9 (устаревшее, так как 1.8)

см http://api.jquery.com/toggle-event/

Итак, вызвав тумблер, вы действительно переключая ваш элемент (если вы используете jq1.9)

КСТАТИ:

$(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); 
     } 
    }); 
}); 

Answer 2

Вы фактически не создаете кнопку. Вам нужно сделать

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

Если у вас есть более одного сообщения, вам нужно зациклиться на них, чтобы создать больше ссылок. Например:

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