$(function activities() {
// Shows info icon on hover //
$(function hover() {
$('.activity-img').hover(function() {
$('.info-icon', this).stop().animate({'opacity': 0.7});
$('h3', this).stop().animate({'color': 'white'});
}, function() {
$('.info-icon', this).stop().animate({'opacity': 0});
$('h3', this).stop().animate({'color': 'black'});
});
});
// reveals information on activity that is clicked //
var activityId;
var currentCopy;
$(function activityImg() {
$('.activity-img').on('click', function() {
activityId = $(this).attr('data-activity');
$('.activity-img').delay(500).fadeOut();
$('#activity-copies').css('display', 'block');
$('#' + activityId).addClass('open-copy').delay(1500).fadeIn();
});
});
$(function activityCopy() {
$('.close').on('click', function() {
$('#' + activityId).removeClass('open-copy').fadeOut();
$('.activity-copy').removeClass('open-copy');
currentCopy.removeClass('open-copy');
$('.activity-img').delay(500).fadeIn();
$('#activity-copies').css('display', 'none');
});
});
// allows navigation through activity info slides //
$(document).ready(function navCopies() {
$('.arrow-next').click(function() {
currentCopy = $('.open-copy');
var nextCopy = currentCopy.next();
if(nextCopy.length === 0) {
nextCopy = $('.activity-copy').first();
}
currentCopy.hide().removeClass('open-copy');
nextCopy.show().addClass('open-copy');
});
$('.arrow-prev').click(function() {
var currentCopy = $('.open-copy');
var prevCopy = currentCopy.prev();
if(prevCopy.length === 0) {
prevCopy = $('.activity-copy').last();
}
currentCopy.hide().removeClass('open-copy');
prevCopy.show().addClass('open-copy');
});
});/*\-------------- HOLIDAY IDEAS --------------\*/
#activities-page h1 {
width: 360px;
}
#activities-page {
background-color: #c1f4f3;
padding-bottom: 100px;
}
#activities {
width: 900px;
height: 840px;
margin: 0 auto;
padding: 10px;
text-align: center;
background-color: #fefffa;
position: relative;
}
.activity-img {
width: 280px;
height: 400px;
margin: 10px;
border: 1px single lightgrey;
border-radius: 2px;
float: left;
position: relative;
z-index: 0;
background-color: transparent;
cursor: pointer;
}
.activity-img h3 {
width: 100%;
text-align: center;
position: relative;
top: 0;
z-index: 2;
background-color: transparent;
}
.activity-copy {
width: 920px;
height: auto;
border: 1px solid #e0e0e0;
border-radius: 2px;
position: absolute;
background-color: #fefffa;
top: 0;
left: 0;
display: none;
}
.activity-imgs-3 {
width: 1500px;
height: auto;
padding: ;
margin: ;
overflow: hidden;
}
.activity-imgs-4 img {
width: 500px;
}
.info-icon {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
border-radius: 5px;
}
#activities [data-activity = 'beaches'] {
background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/beach_zpsec4dcc80.jpg');
background-color: blue;
}
#activities [data-activity = 'bussana'] {
background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/bussana_zpsb30c7bb1.jpg');
background-position: left;
background-size: cover;
background-color: #abe0da;
}
#activities [data-activity = 'cycleway'] {
background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/cycleway_zps39041c18.jpg');
background-position: center;
background-size: cover;
background-color: #20D1AC;
}
#activities [data-activity = 'whalewatch'] {
background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/whale_zpsacf8b16f.jpg');
background-position: center;
background-color: lightgreen;
}
#activities [data-activity = 'cervo'] {
background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/cervo_zps345b3550.jpg');
background-position: center;
background-size: cover;
background-color: lightgrey;
}
#activities [data-activity = 'la-mortola'] {
background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/lamortola_zps47eee73a.png');
background-position: center;
background-size: cover;
background-color: red;
}
.close {
position: absolute;
bottom: 20px;
right: 20px;
cursor: pointer;
}
.arrow-prev, .arrow-next {
float: left;
width: 40px;
height: auto;
position: relative;
border-radius: 2px;
cursor: pointer;
background-color: #5956d0;
}
.arrow-next {
float: right;
}
#activity-copies {
width: 940px;
height: 780px;
position: absolute;
left: -50px;
top: 0;
display: none;
}
.open-copy {
display: block;
}
.activity-copy {
width: 940px;
height: 780px;
padding: 40px;
text-align: left;
border-radius: 5px;
}
#activity-imgs-3 {
width: 500px;
height: 395px;
float: left;
overflow: hidden;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 20px;
-webkit-box-shadow: 0 3px 5px 0 black;
-moz-box-shadow: 0 3px 5px 0 black;
-box-shadow: 0 3px 5px 0 black;
}
.activity-copy h2 {
text-align: center;
}
.activity-copy p {
margin-top: 50px;
padding: 0;
}
#activity-imgs-3 .slides {
width: 2080px;
height: 395px;
display: block;
}
#activity-imgs-3 .slides .slide {
width: 500px;
height: 395px;
list-style-type: none;
overflow: hidden;
float: left;
}
#activity-imgs-3 .slides .slide img {
width: 800px;
}<div id='activities'>
<div data-activity='beaches' class='activity-img'>
<h3>SANDY BEACH</h3>
<img class='info-icon' src='http://i1334.photobucket.com/albums/w648/rwestanton/information_icon-32_zpsa978bbe7.png'>
</div>
<div data-activity='bussana' class='activity-img'>
<h3>BUSSANA VECCHIA</h3>
<img class='info-icon' src='http://i1334.photobucket.com/albums/w648/rwestanton/information_icon-32_zpsa978bbe7.png'>
</div>
<div data-activity='cycleway' class='activity-img'>
<h3>PISTA CICLOPEDONALE DELLA RIVIERA DEI FIORI</h3>
<img class='info-icon' src='http://i1334.photobucket.com/albums/w648/rwestanton/information_icon-32_zpsa978bbe7.png'>
</div>
<div data-activity='whalewatch' class='activity-img'>
<h3>WHALEWATCH IMPERIA</h3>
<img class='info-icon' src='http://i1334.photobucket.com/albums/w648/rwestanton/information_icon-32_zpsa978bbe7.png'>
</div>
<div data-activity='cervo' class='activity-img'>
<h3>DAY TRIP TO CERVO</h3>
<img class='info-icon' src='http://i1334.photobucket.com/albums/w648/rwestanton/information_icon-32_zpsa978bbe7.png'>
</div>
<div data-activity='la-mortola' class='activity-img'>
<h3>HANSBURY BOTANIC GARDENS</h3>
<img class='info-icon' src='http://i1334.photobucket.com/albums/w648/rwestanton/information_icon-32_zpsa978bbe7.png'>
</div>
<div id='activity-copies'>
<div id='beaches' class='activity-copy'>
<img class='close' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929089_basics-22-48_zpsb099028b.png'>
<img class='arrow-next' src='http://i1334.photobucket.com/albums/w648/rwestanton/4c8862a3-482f-4d76-80a4-ba2d0c5ed2bb_zpsf25e24fe.png'>
<img class='arrow-prev' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929185_basics-05-128arrowprev-white_zps971b538a.png'>
<h2>Beaches</h2>
<div id='activity-imgs-3'>
<ul class='slides'>
<li class='slides'><img src=''></li>
<li class='slides'><img src=''></li>
<li class='slides'><img src=''></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.</p>
</div>
<div id='bussana' class='activity-copy'>
<img classs='close' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929089_basics-22-48_zpsb099028b.png'>
<img class='arrow-next' src='http://i1334.photobucket.com/albums/w648/rwestanton/4c8862a3-482f-4d76-80a4-ba2d0c5ed2bb_zpsf25e24fe.png'>
<img class='arrow-prev' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929185_basics-05-128arrowprev-white_zps971b538a.png'>
<h2>Bussana Vecchia</h2>
<div id='activity-imgs-3'>
<ul class='slides'>
<li class='slides'><img src='Content/Images/Promo photos'></li>
<li class='slides'><img src='Content/Images/Promo photos'></li>
<li class='slides'><img src='Content/Images/Promo photos'></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.</p>
</div>
<div id='cycleway' class='activity-copy'>
<img class='close' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929089_basics-22-48_zpsb099028b.png'>
<img class='arrow-next' src='http://i1334.photobucket.com/albums/w648/rwestanton/4c8862a3-482f-4d76-80a4-ba2d0c5ed2bb_zpsf25e24fe.png'>
<img class='arrow-prev' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929185_basics-05-128arrowprev-white_zps971b538a.png'>
<h2>Pista ciclopedonale della Riviera dei Fiori</h2>
<div id='activity-imgs-3'>
<ul class='slides'>
<li class='slides'><img src='Content/Images/Promo photos'></li>
<li class='slides'><img src='Content/Images/Promo photos'></li>
<li class='slides'><img src='Content/Images/Promo photos'></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.</p>
</div>
<div id='whalewatch' class='activity-copy'>
<img class='close' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929089_basics-22-48_zpsb099028b.png'>
<img class='arrow-next' src='http://i1334.photobucket.com/albums/w648/rwestanton/4c8862a3-482f-4d76-80a4-ba2d0c5ed2bb_zpsf25e24fe.png'>
<img class='arrow-prev' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929185_basics-05-128arrowprev-white_zps971b538a.png'>
<h2>Whalewatch Imperia</h2>
<div id='activity-imgs-3'>
<ul class='slides'>
<li class='slides'><img src='Content/Images/Promo photos'></li>
<li class='slides'><img src='Content/Images/Promo photos'></li>
<li class='slides'><img src='Content/Images/Promo photos'></li>
</ul>
</div>
<p>The biologically teaming coastline of the Riviera means whale watching excursions are frequently made in the summer period. People of all ages enjoy this activity and it certainly makes for a quirky alternative to the aquarium. <a href='http://www.whalewatchimperia.it/index.php/en/whale-watching/trip'>Whalewatch Imperia</a> provide a regular boat service that picks up passengers from Sanremo, Imperia and Bordghera. Sitings of fin or sperm whales are successful for a great deal of the trips, but if there is no sighting during your trip, your ticket remains valid for another trip. Other creatures such as dolphins, rays and turtles are regularly spotted, and whatever happens you’re almost certain to spot something. There is generally a buzz of excitement on these trips and people are friendly. During the cruise out to sea your emotions melt away and there is little more relaxing than the feel of the cool wet air on a hot summer’s day.</p>
</div>
<div id='cervo' class='activity-copy'>
<img class='close' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929089_basics-22-48_zpsb099028b.png'>
<img class='arrow-next' src='http://i1334.photobucket.com/albums/w648/rwestanton/4c8862a3-482f-4d76-80a4-ba2d0c5ed2bb_zpsf25e24fe.png'>
<img class='arrow-prev' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929185_basics-05-128arrowprev-white_zps971b538a.png'>
<h2>Day trip to Cervo</h2>
<div id='activity-imgs-3'>
<ul class='slides'>
<li class='slides'><img src='Content/Images/Promo photos'></li>
<li class='slides'><img src='Content/Images/Promo photos'></li>
<li class='slides'><img src='Content/Images/Promo photos'></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.</p>
</div>
<div id='la-mortola' class='activity-copy'>
<img class='close' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929089_basics-22-48_zpsb099028b.png'>
<img class='arrow-next' src='http://i1334.photobucket.com/albums/w648/rwestanton/4c8862a3-482f-4d76-80a4-ba2d0c5ed2bb_zpsf25e24fe.png'>
<img class='arrow-prev' src='http://i1334.photobucket.com/albums/w648/rwestanton/1417929185_basics-05-128arrowprev-white_zps971b538a.png'>
<h2>Hansbury Botanic Garden</h2>
<div id='activity-imgs-3'>
<ul class='slides'>
<li class='slide'><img src='Content/Images/Promo photos/Flickr/A Nc Nd/467258563_fbf5c56221_b.jpg'></li>
<li class='slide'><img src='Content/Images/Promo photos/Flickr/C/2/La Mortola.png'></li>
<li class='slide'><img src='Content/Images/Promo photos/Flickr/A Nc Nd/11840672446_4a73a85cdc_h.jpg'></li>
<li class='slide'><img src='Content/Images/Promo photos/Flickr/A Nc Nd/467258563_fbf5c56221_b.jpg'></li>
</ul>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.</p>
</div>
</div>
</div>
</div>
对于我的网站，我创建了一个专门用于假日创意的部分，其中包含一系列封面图片和度假者可能喜欢的活动信息。它是互动的，基本上就像一个画廊，应该像这样工作：用户点击封面图片;所有封面图片消失，并显示相应活动的信息框;用户可以浏览具有不同活动信息的所有框或关闭其当前框;一旦关闭，他们可以点击另一张封面图片，它应该重复所描述的第一个动作。但是在此阶段，用户会看到他们关闭的最后一个信息框，并且每次他们点击箭头时都会显示该信息，直到用户浏览完活动并通过该框。 我正在分配一份“开放式副本”。允许用户导航的类，我认为它仍然以某种方式附加。
如果我的描述不够，它应该像这个页面，你点击一个产品，它显示该产品的信息，并允许你浏览每个产品的信息（减去一些动画）： http://www.lesfleurs.ch/bouquets.php?lang=en&select_pays=110&monnaie=EUR
答案 0 :(得分：2)
你在关闭函数中忘记了隐藏元素：
$('.activity-copy').removeClass('open-copy').hide();
而不是
$('.activity-copy').removeClass('open-copy');
如果你没有隐藏它，你将在下一次打开时单击display: block的两个元素。使用上面的代码，您可以隐藏关闭时的所有元素，然后您只使用display:block的正确元素。
另一件事：
currentCopy.removeClass('open-copy');
如果您打开信息并关闭它而不在信息之间切换，则关闭函数中的这一行将失败，因为在这种情况下currentCopy未定义。
请执行以下操作：
$('.open-copy').removeClass('open-copy');
这将删除关闭时的所有open-copy classes。