README

从 https://github.com/DSekon/DReadMore 分支出来，用作drupal-library。

用于折叠和展开长文本块的插件。您可以使用CSS来禁用它！

演示

开始使用DReadMore

将文件包含到网站中

之后，我们需要将DReadMore JS文件包含到我们的网站中。在你的HTML文件中

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    ...
    <script src="https://unpkg.com/dreadmore@2/dist/dreadmore.min.js"></script>
</body>
</html>

添加HTML布局

现在，我们需要添加基本的DReadMore布局

<div class="dreadmore">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit recusandae quas eaque
    laudantiumquo, dolorem vitae quia cupiditate sit, exercitationem suscipit molestiae iste
    dolores eos facere mollitia voluptatibus nihil. Dicta ex blanditiis officiis beatae
    similique neque nostrum consequatur maiores quas!
</div>
<button type="button"
        data-drm-toggler>Show more</button>

添加CSS样式

之后，我们可能需要在CSS文件中设置DReadMore的min-height和overflow

.dreadmore {
    min-height: 2px;
    overflow: hidden;
}

/* for a disabled toggler */
.dreadmore--disabled {
    display: none;
}

根据行数设置一个 min-height，您可以在CSS中这样做：1px - 1行

文档

选项

让我们看看所有可用的参数列表

示例

const dreadmore = new DReadMore({
    initialExpand: true,
    isInitialExpandWhenUpdate: true,
    moreText: 'Show more',
    lessText: 'Up'
});

回调函数

之后，我们需要将DReadMore JS文件包含到我们的网站中。在你的HTML文件中

const dreadmore = new DReadMore({
    // beforeToggle called after a more or less link is clicked, 
    // but before the block is collapsed or expanded
    beforeToggle: function($element, expanded) {
        console.log($element, expanded)
    },

    // afterToggle called after the block is collapsed or expanded
    afterToggle: function($element, expanded) {
        console.log($element, expanded)
    }
});

更新

dreadmore.update();

销毁

如果你真的很想成为那样的人...

dreadmore.destroy();

禁用

并且你可以在CSS中禁用:D

.dreadmore {
    min-height: 0px;
}

levmyshkin / dreadmore

维护者

详细信息