Question

我有 jsFiddle ：http://jsfiddle.net/jsFiddlePlayer/xxep0gng/7/

它正在使用Bootstrap显示一些带有Readmore.js库的文本缩略图，以展开/折叠拇指。我已经为beforeToggle调用的readmore()添加了一些自定义代码，以尝试执行此操作：当我们点击“阅读更多”时，该缩略图应展开以填充行的整个宽度（将类切换为col-sm-12）并隐藏所有其他缩略图。然后，当我们单击“关闭”时，它需要折叠当前项目（将类切换为col-sm-3）并显示所有其他隐藏的缩略图。

目前，我已经让它扩展项目并隐藏所有其他缩略图。但是当我们点击“关闭”时，我无法显示其他项目。

这是HTML：

<div class="row">
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-0">
            <h3>Sixth Post</h3>
            <h4>5/14/2015 8:48:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-0">Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-1">
            <h3>Fifth Post</h3>
            <h4>5/14/2015 8:48:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-1">Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-2">
            <h3>Fourth Post</h3>
            <h4>5/14/2015 8:47:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-2">Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-3">
            <h3>Third Post</h3>
            <h4>5/14/2015 8:46:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-4">
            <h3>Second Post</h3>
            <h4>5/14/2015 8:46:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-4">Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-5">
            <h3>First Post</h3>
            <h4>3/3/2015 9:47:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. </div>
        </div>
    </div>

</div>

这是jQuery：

$(document).ready(function () {
    $('.rss-post-content').readmore({
        speed: 500,
        beforeToggle: function (trigger, element, expanded) {
            var thumbnailIndex = $(element).attr('id').substring($(element).attr('id').lastIndexOf('-') + 1);
            var others = $(".rss-post").not($('#rss-post-' + thumbnailIndex));
            $('#rss-post-' + thumbnailIndex).closest('.col-sm-3').removeClass('col-sm-3').addClass('col-sm-12');
            others.each(function () {
                $(this).addClass('hidden');
            });
            var anchor = $("a[aria-controls='" + $(element).attr('id') + "']");

            $(anchor).on('click', function (e) {
                $('#rss-post-' + thumbnailIndex).closest('.col-sm-12').removeClass('col-sm-12').addClass('col-sm-3');
                others.each(function () {
                    $(this).removeclass('hidden');
                });
            });
        },
        afterToggle: function (trigger, element, expanded) {}
    });
});

Answer 1

关闭项目时，您可以添加一个特定的类来重新调用它们。

 others.each(function () {
            $(this).addClass('hidden IwillNeedYouAgain');
        });

当你需要转回它们时;

 $(".IwillNeedYouAgain").removeClass("hidden IwillNeedYouAgain");

单击时将Bootstrap div展开为完整行

1 个答案: