滑动内容分离之前和重新连接上点击(Sliding content up before detachi

我正在为WordPress的插件中的短代码，所有的工作，因为它应该只是个东西是缠着我了一下。

我有一个画廊列表，当你点击一个项目，该分区的内容下滑。如果你点击相同的项目，内容上滑，但如果你点击一个不同的项目，内容只是切换附加DIV中。所附的div被“胶合”到其中图像被放置在包装容器中。

所以，如果你在同一行内单击，在所附的div保持它是，只有内容的变化，但如果你从下一行的图像上单击，后附的div只是跳到那里，显示像这样的内容：

 var $content = $(".big_container"); var $loaded_content = $(".details"); var $item_selector = $(".item"); if ($content.length > 0) { $item_selector.on('click', function(e) { e.preventDefault(); function load_gallery_container($container) { var $insert_after = $container.parent('.wrappers'); $loaded_content.detach().insertAfter($insert_after); var div_data = $container.data('content'); $loaded_content.find('.div_content').html(div_data); if (!$container.hasClass("current")) { $container.addClass("current"); $loaded_content.slideDown('slow').addClass("open"); } else { $(".current").removeClass("current"); $loaded_content.slideUp('slow').removeClass("open"); } setTimeout(function() { $('html, body').animate({ scrollTop: $loaded_content.offset().top - 300 }, 500); }, 600); } var $this = $(this); load_gallery_container($this); }); }

 .big_container { background: #141414; display: block; padding: 30px; } .wrappers { width: 500px; margin: 0 auto; display: block; } .item { width: 31%; height: 100px; margin-right: 1%; margin-bottom: 30px; text-align: center; background: #ccc; color: #fff; display: inline-block; } .details { background: #ddd; width: 100%; padding: 30px; display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="big_container"> <div class="wrappers"> <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div> <div class="item" data-content="blabla BLALALA bla blaaaa">Click on meee!</div> <div class="item" data-content="blabla blBLALbla blaaaa">Click on meee!</div> </div> <div class="wrappers"> <div class="item" data-content="blabla bla bla randomness">Click on meee!</div> <div class="item" data-content="blabla bla bla ">Click on meee!</div> <div class="item" data-content="blabla bla bla weeee">Click on meee!</div> </div> <div class="wrappers"> <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div> <div class="item" data-content="blabla bla bla???">Click on meee!</div> <div class="item" data-content="I am done with blaaaaing">Click on meee!</div> </div> <div class="details">The content from div goes here: <div class="div_content"></div> </div> </div>

这是跳跃缠着我。我想，当你在第二行中单击图像，内容DIV是开放的，它首先向上滑动，然后将第二排下下滑。

我有点坚持了这一点。我把装载和所有的功能，因为我有一个/下一个按钮，应该循环的item申报单，并显示其内容。

如果我只是尝试添加if子句，以检查那些行图像/ DIV所在？

任何帮助表示赞赏:)

Answer 1:

试试下面的jQuery的，它应该达到你想要什么

var $content = $(".big_container");
var $loaded_content = $(".details");
var $item_selector = $(".item");

if ($content.length > 0) {
    $item_selector.on('click', function (e) {
        e.preventDefault();

        var $this = $(this);

        load_gallery_container($this);
    });
}

function load_gallery_container($container) {
    if ($container.hasClass("current")) {
        $loaded_content.slideUp('slow', function () {
            $(this).removeClass('open');
            $container.removeClass("current");
        });
    } else {

        var $insert_after = $container.parent('.wrappers'),
            $current = $('.current');
            $current.removeClass('current');

        if ($current.parent('.wrappers').is($insert_after)) {
            $loaded_content.find('.div_content').html($container.data('content'));
            $container.addClass("current");
        } else {
            if ($loaded_content.hasClass("open")) {
                $loaded_content.slideUp('slow', function () {
                    $(this).removeClass('open');
                    $container.removeClass("current");

                    $loaded_content.detach().insertAfter($insert_after);
                    $loaded_content.find('.div_content').html($container.data('content'));
                });
            } else {
                $loaded_content.detach().insertAfter($insert_after);
                $loaded_content.find('.div_content').html($container.data('content'));
            }

            $loaded_content.slideDown('slow', function () {
                $container.addClass("current");
                $(this).addClass('open');
            });
        }
    }
    setTimeout(function () {
        $('html, body').animate({
            scrollTop: $loaded_content.offset().top - 300
        }, 500);
    }, 600);
}

例如小提琴

Answer 2:

编辑您的代码来实现你想要它做的事情。

 var $content = $(".big_container"); var $loaded_content = $(".details"); var $item_selector = $(".item"); if ($content.length > 0) { $item_selector.on('click', function(e) { e.preventDefault(); function load_gallery_container($container) { if (!$container.hasClass("current")) { $loaded_content.slideUp('slow', function() { show_hide_container($container); }).removeClass("open"); } else { show_hide_container($container); } setTimeout(function() { $('html, body').animate({ scrollTop: $loaded_content.offset().top - 300 }, 500); }, 600); } function show_hide_container($content_container) { var $insert_after = $content_container.parent('.wrappers'); $loaded_content.detach().insertAfter($insert_after); var div_data = $content_container.data('content'); $loaded_content.find('.div_content').html(div_data); if (!$content_container.hasClass("current")) { $content_container.addClass("current"); $loaded_content.slideDown('slow').addClass("open"); } else { $(".current").removeClass("current"); $loaded_content.slideUp('slow').removeClass("open"); } } var $this = $(this); load_gallery_container($this); }); }

 .big_container { background: #141414; display: block; padding: 30px; } .wrappers { width: 500px; margin: 0 auto; display: block; } .item { width: 31%; height: 100px; margin-right: 1%; margin-bottom: 30px; text-align: center; background: #ccc; color: #fff; display: inline-block; } .details { background: #ddd; width: 100%; padding: 30px; display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="big_container"> <div class="wrappers"> <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div> <div class="item" data-content="blabla BLALALA bla blaaaa">Click on meee!</div> <div class="item" data-content="blabla blBLALbla blaaaa">Click on meee!</div> </div> <div class="wrappers"> <div class="item" data-content="blabla bla bla randomness">Click on meee!</div> <div class="item" data-content="blabla bla bla ">Click on meee!</div> <div class="item" data-content="blabla bla bla weeee">Click on meee!</div> </div> <div class="wrappers"> <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div> <div class="item" data-content="blabla bla bla???">Click on meee!</div> <div class="item" data-content="I am done with blaaaaing">Click on meee!</div> </div> <div class="details">The content from div goes here: <div class="div_content"></div> </div> </div>

文章来源: Sliding content up before detaching it and reattaching on click