单击时将 Bootstrap div 展开为整行

Question

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

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