Javascript 将内容向上滑动，然后将其拆离并单击重新附着

我正在为wordpress上的插件编写一个短代码，所有的插件都正常工作，除了一件有点困扰我的事情

我有一个库列表，当你点击一个项目时，该div的内容会向下滑动。如果单击同一项，内容会向上滑动，但如果单击其他项，内容只会在附加的div内切换。附加的div会“粘合”到放置图像的包装容器上

因此，如果在同一行中单击，附加的div将保持原样，只有内容会更改，但如果单击下一行中的图像，附加的div将跳转到该行并显示如下内容：

var$content=$（“.big_容器”）；
var$loaded_content=$（“.details”）；
变量$item_选择器=$（“.item”）；
如果（$content.length>0）{
$item_selector.on（'click'，函数（e）{
e、 预防默认值（）；
函数加载\u库\u容器（$container）{
var$insert_after=$container.parent（'.wrappers'）；
$loaded\u content.detach（）.insertAfter（$insert\u after）；
var div_data=$container.data（'content'）；
$loaded_content.find（'.div_content'）.html（div_数据）；
if（！$container.hasClass（“当前”））{
$container.addClass（“当前”）；
$loaded_content.slideDown（'slow'）.addClass（“open”）；
}否则{
$（.current”）.removeClass（“current”）；
$loaded_content.slideUp（'slow'）.removeClass（'open'）；
}
setTimeout（函数（）{
$（'html，body'）。设置动画({
scrollTop:$loaded_content.offset（）.top-300
}, 500);
}, 600);
}
var$this=$（this）；
装载画廊集装箱（$this）；
});
}

.big\u容器{
背景：#141414；
显示：块；
填充：30px；
}
.包装纸{
宽度：500px；
保证金：0自动；
显示：块；
}
.项目{
宽度：31%；
高度：100px；
保证金权利：1%；
边缘底部：30px；
文本对齐：居中；
背景：#ccc；
颜色：#fff；
显示：内联块；
}
.详情{
背景：ddd；
宽度：100%；
填充：30px；
显示：无；
}

点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
div的内容如下：

编辑您的代码以实现您想要的功能

var$content=$（“.big_容器”）；
var$loaded_content=$（“.details”）；
变量$item_选择器=$（“.item”）；
如果（$content.length>0）{
$item_selector.on（'click'，函数（e）{
e、 预防默认值（）；
函数加载\u库\u容器（$container）{
if（！$container.hasClass（“当前”））{
$loaded_content.slideUp（'slow'，function（）{
显示隐藏容器（$container）；
}).removeClass（“开放”）；
}
其他的
{
显示隐藏容器（$container）；
} 			  
setTimeout（函数（）{
$（'html，body'）。设置动画({
scrollTop:$loaded_content.offset（）.top-300
}, 500);
}, 600);
}
函数show\u hide\u container（$content\u container）{
var$insert_after=$content_container.parent（'.wrappers'）；
$loaded\u content.detach（）.insertAfter（$insert\u after）；
var div_data=$content_container.data（'content'）；
$loaded_content.find（'.div_content'）.html（div_数据）；
if（！$content\u container.hasClass（“当前”））{
$content_container.addClass（“当前”）；
$loaded_content.slideDown（'slow'）.addClass（“open”）；
}否则{
$（.current”）.removeClass（“current”）；
$loaded_content.slideUp（'slow'）.removeClass（'open'）；
}
}
var$this=$（this）；
装载画廊集装箱（$this）；
});
}

.big\u容器{
背景：#141414；
显示：块；
填充：30px；
}
.包装纸{
宽度：500px；
保证金：0自动；
显示：块；
}
.项目{
宽度：31%；
高度：100px；
保证金权利：1%；
边缘底部：30px；
文本对齐：居中；
背景：#ccc；
颜色：#fff；
显示：内联块；
}
.详情{
背景：ddd；
宽度：100%；
填充：30px；
显示：无；
}

点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
点击meee！
div的内容如下：

试试下面的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);
}

---

即使我点击了同一行，也会关闭内容分区，这不是我需要的，第二行的转换很好。如上所述，行与行之间的转换是正常的，当我在同一行时，我不需要幻灯片向上转换。就是这样！你是洛克先生！：D另外感谢函数提示，我忽略了这一点。