单击将Bootstrap div展开为整行

Question

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

它使用Bootstrap通过Readmore.js库显示一些文本缩略图，以扩展/折叠拇指。 我在readmore()调用的beforeToggle中添加了一些自定义代码，以尝试执行以下操作：当我们单击“ Read More”时，该缩略图应展开以填充行的整个宽度（将类切换为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");