感谢您在Advance中提供的帮助。
我创建了一个html页面,用户点击图片,点击即可消费(显示另一个Div)。它正是我正在寻找的工作,但只有一个问题。当在移动设备(例如Iphone)中打开相同的页面并且您单击第一个图像时,它可以正常工作,但如果您向下滚动页面,则消耗的图像会消失。如果您查看下面的代码并在移动设备中打开以下页面以了解我的意思,我非常感谢。我想我在Javascript中遗漏了一些东西。
这是页面:http://netstormdev.com/test.html
$(function() {
$(window).on('resize', function() {
$('.openEntry').remove();
$('.entry').hide();
var startPosX = $('.preview:first').position().left;
console.log(startPosX);
$('.entry, .preview').removeClass("first last");
$('.entry').each(function() {
if ($(this).prev('.preview').position().left == startPosX) {
$(this).prev('.preview').addClass("first");
$(this).prevAll('.entry:first').addClass("last");
}
});
$('.entry:last').addClass("last");
});
$(window).trigger('resize');
$('.trigger').click(function() {
$('.openEntry').slideUp(1000);
var preview = $(this).closest('.preview');
preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(1000);
});
$('body').on('click', '.close', function() {
$('.openEntry').slideUp(1000).remove();
});
});

@media only screen and (min-width: 480px) and (max-device-width: 480px) {
.preview {
width: 32.4%;
float: left;
margin-right: 23px;
}
}
@media only screen and (max-width: 479px) {
.preview {
width: 32.4%;
float: left;
margin-right: 23px;
}
}
.entry.last.openEntry {
display: none;
}
.cuox .preview {
display: none;
}
.preview {
width: 24.6%;
float: left;
margin-right: 23px;
}
.entry {
width: 100%;
padding: 5px;
margin: 5px;
float: left;
clear: left;
}
.close_button {
text-align: right;
}
.smalle {
max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
<div class="mix preview red">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/c.jpg">
</p>
</div>
<div class="mix preview green">
<p>
<a class="trigger" href="#">
<img class="smalle" src="http://netstormdev.com/img/a.jpg">
</a>
</p>
</div>
<div class="entry">
<div class="close_button">
<a class="close" href="#">×</a>
</div>
<p>
<img src="http://netstormdev.com/img/b.jpg">
</p>
</div>
&#13;