我正在为wordpress上的一个插件编写短代码,一切正常,除了一件事让我有点困扰。
我有一个画廊列表,当你点击一个项目,该div的内容向下滑动。如果你点击同一项,内容向上滑动,但如果你点击不同的项,内容只是在附加的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是打开的,它首先向上滑动,然后向下滑动到第二行下面。
我有点被困住了。我把加载和所有的功能,因为我将有一个previous/next按钮,应该循环通过item
div和显示他们的内容。
我是否应该尝试添加if子句来检查图像/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);
}
例子小提琴
编辑您的代码以实现您想要的功能。
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>