如何在 Blogger 界面点击文字展开内容？

Question

我正在使用 blogger 来整理我的想法。我正在将原始想法排列在一个页面中，其中许多想法都放在相关标题下。随着想法列表的增加，我无法对我正在进行的探索或决定有一个总览，以取得进展。

我到处搜索这个，并试图包含某些代码，但没有得到结果。由于我对网页设计语言一无所知，因此很难拥有这种灵活性。我现在应该在博客中做什么？我应该放置哪个代码才能获得此 hide/show 能力？

Answer 1

首先，将此代码（它已包含在 <script> 标签中）添加到您的网站。

<script type="text/javascript" language="JavaScript">
    function HideContent(d) {
        document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
        document.getElementById(d).style.display = "block";
    }
    function ReverseDisplay(d) {
        if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
        else { document.getElementById(d).style.display = "none"; }
    }
</script>

接下来，添加一个具有唯一 ID 的 <div>（您选择什么取决于您，只需在整个代码中保持相同的 ID 即可）。像这样：

<div id="uniquename" style="display:none;">
    <p>Content goes here.</p>
</div>

最后，添加一个<a>元素（属性的缩写，基本上是指可点击的文本）。这将创建（默认为蓝色）文本 "Read More"。单击时，会展开 div.

<a href="javascript:ShowContent('uniquename')">Read more</a>

对于隐藏 div 的文本：

<a href="javascript:HideContent('uniquename')">Show less</a>

对于切换 div 的代码：

<a href="javascript:ReverseDisplay('uniquename')">Read more/less</a>

要更改链接的颜色（尽管这不是最好的方法），请执行以下操作：

<a href="javascript:ReverseDisplay('uniquename')" style="color:green;">Read more/less</a>

您可以用大多数颜色或十六进制代码替换 "green"。

如何在 Blogger 界面点击文字展开内容？

How to expand content upon clicking the text in the Blogger interface?

html

blogger