如何修改这个read more js

How to modify this read more js

本文关键字：read more js 何修改 修改      更新时间：2023-09-26

http://jsfiddle.net/raininglemons/wutu9k7k/

(function () {
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) {
        // Find .readmore parent
        var parent = buttons[i].parentElement;
        while (parent !== null && !parent.className.match("readmore"))
            parent = parent.parentElement;
        // Reached top of dom tree and didn't find .readmore element
        if (parent === null)
            continue;
        buttons[i].addEventListener("click", function (event) {
            // Cancel default button behaviour
            event.preventDefault();
            // Add .showall class to parent
            parent.className = parent.className + " showall";
        });
    }
})();

这只显示所有内容，按钮消失。我也希望通过按下相同的按钮来隐藏内容，只是为了回到原始状态。

更新

根据@cmorrissey的建议，我已经将条件更改为在几个类的情况下更通用。

更新了fiddle。

经过两次更改后，您的代码运行良好。

第一：删除以下在单击后隐藏按钮的样式：

/* hide button when revealing all */
.readmore.showall button {
   display: none;
}

第二：在click事件中添加条件以检入show_all类是否已在父div中：

buttons[i].addEventListener("click", function (event) {
    // Cancel default button behaviour
    event.preventDefault();
    // Add .showall class to parent
    if(!parent.className.match("showall")){
        parent.className = parent.className + " showall";
        this.innerText = "Read less"; //Optionally if you want to change 
    } else {
        parent.className = parent.className.replace("showall", "");
        this.innerText = "Read more"; //Optionally if you want to change 
    }
 });

希望这能有所帮助。

相关文章：