jquery - Readmore.js 在 Bootstrap 3 Modal 中不起作用

Question

我正在使用 Readmore.js 在我的页面中隐藏额外的内容。这在任何地方都可以正常工作，除了在 Bootstrap Modal 中不工作。

这是我的例子 FIDDLE

您会看到一些文本带有“显示更多”链接。当我点击显示更多时，它会显示更多隐藏的文本。 但是我在 Modal 中做了同样的事情(单击 Modal Button)，但它在那里不起作用。我希望我正确地添加了所有内容，但我不明白为什么它不进入模态。我如何让它在模态中工作。

我也非常需要这个 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);
});

第一次打开模态框后需要初始化插件。

-DEMO jsFiddle-