Question

我在页面中使用 Readmore.js 来隐藏额外内容。这个工作正常，除了在Bootstrap Modal中没有工作。

以下是我的示例 FIDDLE

您会看到有一些文字显示更多链接。当我点击该显示更多时，它会显示更多隐藏的文本。但是我在Modal中做了同样的事情（点击模态按钮），但它没有在那里工作。我希望我正确地添加了所有内容，但我不知道为什么它不会进入模态。如何让它在模态中工作。

我需要这个readmore.js也非常糟糕。所以任何帮助都会救我。

JS

$('.show-more').readmore({
        maxHeight: 112,
        speed: 300,
        moreLink: '<a href="#" class="btn btn-link" style="display: block; width: auto; padding: 0px;text-align: left; margin-top: 10px;">Show more</a>',
        lessLink: '<a href="#" class="btn btn-link" style="display: block; width: auto; padding: 0px;text-align: left; margin-top: 10px;">Show Less</a>'
    });

Answer 1

您可以使用show和shown bootstrap3事件，例如：

var opts = {
    maxHeight: 112,
    speed: 300,
    moreLink: '<a href="#" class="btn btn-link" style="display: block; width: auto; padding: 0px;text-align: left; margin-top: 10px;">Show more</a>',
    lessLink: '<a href="#" class="btn btn-link" style="display: block; width: auto; padding: 0px;text-align: left; margin-top: 10px;">Show Less</a>'
};

$('.show-more').readmore(opts);

$('.modal').one('show.bs.modal', function () {
    //for styling purpose only
    $(this).find('.show-more').css({overflow: "hidden", maxHeight: opts.maxHeight});
}).one('shown.bs.modal', function () {
    //initialize plugin once modal shown
    $(this).find('.show-more').readmore(opts);
});

首次打开模态后，您需要初始化插件。

Readmore.js在Bootstrap 3 Modal中无法正常工作

1 个答案:

-DEMO jsFiddle-