阅读更多/读少

我不知道什么是错我的代码：阅读更多/读少

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

阅读更多/读少

回答

相关问题