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

问题描述

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

我正在尝试对其进行编码/设计，以使副本的长版读起来相同，但为想要更多故事而不是快速概述的任何人提供更多细节和解释。

几个小时以来，我一直在尝试使用 JavaScript（用于函数）和 CSS（用于开关/切换按钮的样式）来实现这一目标，但我的新手技能并没有给我带来多少运气！

非常感谢任何建议或指导。

解决方法

您可以通过以下方式实现：

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>

bluehost javascript wordpress