使用切换式按钮在短段落和长段落之间切换

Question

我刚刚开始使用自托管 Wordpress，并且正在寻找一种方法来在页面的某些部分显示短（截断）和长（完整）文本段落。我希望访问者首先看到简短的版本，然后单击“切换”切换到较长的段落。

我正在尝试以这样一种方式对其进行编码/设计，以使长版本的副本看起来相同，但包含更多细节和解释，供任何想要更多故事而不是快速概述的人使用。

我已经尝试使用 JavaScript（用于函数）和 CSS（用于切换/切换按钮的样式）来实现这一目标已有好几个小时了，但我的新手技能并没有给我带来太多好运！

我们将不胜感激任何建议或指导。

Answer 1

这就是你实现它的方法：

function toggleLong(element) {
    var node = element.parentNode.parentNode;
    if (node.classList.contains("short")) {
        node.classList.remove("short");
        node.classList.add("long");
    } else {
        node.classList.add("short");
        node.classList.remove("long");
    }
}

.short > .longtext {
    display: none;
}

.long > .shorttext {
    display: none;
}

    <div class="short">
        <div class="shorttext">
            <span>abcd...</span>
            <input type="button" value="more" onclick="toggleLong(this)">
        </div>
        <div class="longtext">
            <span>abcdefgh</span>
            <input type="button" value="less" onclick="toggleLong(this)">
        </div>
    </div>