AJAX显示/隐藏内容

Question

在有人抱怨之前我试过谷歌但是没有直接的答案或任何形式的教程..

基本上我有文章，其中一个段落被看到一个*阅读更多“链接使用一些javascript它显示更多的内容，虽然最终这将减慢网站，因为文章的其余部分在那里，但只是隐藏。

所以我的问题是如何设置AJAX / PHP以引入内容？我知道如何在mysql上建立一个数据库，我是否正确地猜测我需要在存储它时在MySQL中输入文章？抱歉，如果我说的一切都令人困惑，但我迷惑自己...如果有人能解释一个绝对的初学者，那将是很好的谷歌只是不是我的朋友，即使经过几个小时的搜索。

认为我被误解了。我已经实现了上面的截图，但我现在想做的不是隐藏内容然后点击显示它，使用AJAX，数据库和php调用它

Answer 1

1. 添加“PreviewCutoffIndex”或类似于文章表。
2. 在页面加载时，将文章HTML /内容显示为截止索引。
3. 对于“阅读更多”按钮，将文章标识符放入属性
4. 添加一个进行Ajax调用的单击处理程序，以加载文章的其余部分

---

标记看起来像这样（“data-article-id”来自PHP在页面加载时）：

<div>
    <?php echo $mysqlResult["articleContent"]; ?>
</div>
<a id="moreButton" data-article-id="<?php echo $articleId; ?>" href='#'>Read More</div>
<div id="moreContent"></div>

Javascript（假设您将使用JQuery）：

$("#moreButton").on("click", function(e) {
    e.preventDefault();
    var articleId = $(this).attr("data-article-id");

    // load article into "moreContent" div
    $("#moreContent").load("content.php?articleId=" + articleId);
});

然后，PHP content.php应根据$_GET("articleId")为文章的其余部分返回文本（或更可能的标记）。

Answer 2

尽管你明确表示你不想加载整篇文章，但我仍然会说你应该：

我非常确定使用ajax获取每篇文章的其余内容时，您的服务器负载会更高，因为每次'read more'操作都需要另外一个请求。

另外，如果你正在抓住你的请求，那么在请求的大小上多一点文字也不重要。

如果由于你的文章而导致页面加载速度很慢，或许可以尝试查看pagination（分别显示20篇文章，分别为5篇，制作网页，而不是同时发表20篇文章）< / p>

Answer 3

ol＆＃39;在css中显示/隐藏方法？

看一下非常先进的方法。

http://cssdeck.com/labs/css-only-showhide