如何使用jQuery在阅读更多链接之后显示内容？

问题描述：

我在一个div中有一个'read more'链接。我希望链接后的内容在页面加载时隐藏，并在点击链接时显示。我还希望链接要么消失，要么改为'少'。如何使用jQuery在阅读更多链接之后显示内容？

的HTML如下：

<div class="widget-box"> 
//Text to be shown on page load 
<a id="toggle">read more</a> 
//Text to be toggled 
</div>

窗口小部件框格的内容是使用WordPress的文本控件创建。
我想在不添加额外html（div和span）的情况下做到这一点。
客户端需要控制放置#toggle链接的位置。

感谢您的帮助。

基思

你到目前为止尝试过什么？记住，我们在这里是为了帮助你处理你的工作，而不是为你工作:) –

谢谢杰米，你是对的。这是我到目前为止有： '' 它确实有效，但链接必须仔细放置在段落末尾，因为它不会缩短它当前所处的段落。 – kdev

答

使用jQuery扩展Plungin：http://plugins.learningjquery.com/expander/

这是最简单的一个。祝你好运。

感谢Rikudo。我看过这个插件。不幸的是，我需要客户端能够确定文本在哪里被切断，而不是在代码中设置。 – kdev

答

这里是一个small demo让你开始。有更好的方法来加强这一点，例如使用text-overflow来指示“更多”部分而不是“更多阅读”，或者在“阅读更多”部分指出更好的风格;或提请注意“多”，像call to action，尽管这种联系是一个插件，它可能是一个简单的.toggle()或.show()

HTML

<p class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    <a href="#">read more</a> 
    <span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
</p>

CSS

p span { 
    display:none; 
}

开销的另一种方式

的JavaScript

$('a').click(function() { 
    $(this).next().show(); 
    return false; 
});

答

为什么不只是创建另一个嵌套的div？

<div class="widget-box"> 
//Text to be shown on page load 
    <a class="toggle">read more</a> 
    <div class="readmore-content"> 

    </div> 
</div>

CSS：

.readmore-content { 
    display: none; 

}

的JavaScript/jQuery的

$(".toggle").click(function() { 
    $(this).next('div').toggle(); 
});

Hi Uk。感谢您的回复。这将是一个很好的解决方案，不幸的是div的内容是由客户端创建的，所以不能依赖额外的html。我已经更新了这个问题来反映这一点。 – kdev

答

这是我到目前为止有：

<script> 
jQuery(".toggle").parent().nextAll().hide(); 
jQuery(".toggle").click(function() { 
jQuery(".toggle").parent().nextAll().toggle("slow"); 
jQuery(this).hide("slow"); 
}); 
</script>

它的工作，但链接已请仔细放在段落的末尾，因为它不会horten它当前所在的段落。

如何使用jQuery在阅读更多链接之后显示内容？

相关推荐