Question

我在div中有一个'read more'链接。我希望该链接后的内容在页面加载时隐藏，并在单击链接时显示。我也希望链接消失，或改为'less'。

html如下：

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

使用WordPress文本创建widget-box div的内容窗口小部件。
我想这样做而不添加额外的html（div和spans）。
客户需要控制#toggle链接的放置位置。

感谢您的帮助。

基思

Answer 1

这是一个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;
});

Answer 2

使用jQuery Expander插件：{{3p>

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

Answer 3

为什么不创建另一个嵌套的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();
});

Answer 4

这是我到目前为止所做的：

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

它确实有效，但链接必须小心地放在段落的末尾，因为它不会缩短当前段落。

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

4 个答案: