这是代码。当提供适当的链接时，它工作正常。但是什么时候，
<span class="closeSliderB">Close</span>
</div>
从第91行移动到第129行，并且页面重新显示，效果停止工作。 怎么解决？有没有其他方法可以达到这个效果？
注意：我只是这些领域的首发，这些代码不是我的。
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Animesh | IITB</title>
<style type="text/css">
.sliderB{
display:none;
}
.togglerB:hover,
.closeSliderB:hover{
cursor:pointer;
}
.wrapper {
}
.slider {
margin: 100px 0 0 0;
height: 500px;
overflow: hidden;
background: url(img/ajax-loader.gif) center center no-repeat;
}
.slider .slide {
position: relative;
display: none;
height: 500px;
float: left;
background-position: center right;
cursor: pointer;
border-left: 1px solid #fff;
}
.slider .slide:first-child {
border: none;
}
.slider .slide.active {
cursor: default;
}
.slider .slide-block {
position: absolute;
left: 15px;
bottom: 15px;
display: inline-block;
width: 435px;
background-color: #fff;
background-color: rgba(255,255,255, 0.8);
padding: 10px;
font-size: 14px;
color: #134B94;
border: 1px solid #fff;
overflow: hidden;
border-radius: 4px;
}
.slider .slide-block h4 {
font-size: 36px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1;
}
.slider .slide-block p {
margin: 0;
}
}
</style>
</head>
<body>
<h3 class="togglerB" id="toggler-slideOneB">
CLICK TO READ MORE...
</h3>
<div class="sliderB" id="slideOneB">
<div>jQuery the write less do more JavaScript library...</div>
<span class="closeSliderB">Close</span>
</div>
<h3 class="togglerB" id="toggler-slideTwoB">
CLICK TO READ MORE...
</h3>
<div class="sliderB" id="slideTwoB">
<div>jQuery is a cross-platform JavaScript library designed to...</div>
<span class="closeSliderB">Close</span>
</div>
<div class="wrapper">
<div class="slider">
<div class="slide" style="background-image: url(pic1.jpg);">
<div class="slide-block">
<h3 class="title"><a href="#" target="_blank">Link1</a></h3>
<div class="desc text-left">
<p>P1</p>
<p>L1</p>
</div>
</div>
</div>
<div class="slide" style="background-image: url(pic2.jpg);">
<div class="slide-block">
<h3 class="title"><a href="#" target="_blank">Link2</a></h3>
<div class="desc text-left">
<p>P2</p>
<p>L2</p>
</div>
</div>
</div>
<div class="slide" style="background-image: url(pic3.jpg);">
<div class="slide-block">
<h3 class="title"><a href="#" target="_blank">Link3</a></h3>
<div class="desc text-left">
<p>P3</p>
<p>L3</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script src="jquery.carouFredSel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.slider').carouFredSel({
width: '100%',
align: false,
items: 3,
items: {
width: $('.wrapper').width() * 0.15,
height: 500,
visible: 1,
minimum: 1
},
scroll: {
items: 1,
timeoutDuration : 5000,
onBefore: function(data) {
// find current and next slide
var currentSlide = $('.slide.active', this),
nextSlide = data.items.visible,
_width = $('.wrapper').width();
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.15
});
currentSlide.removeClass( 'active' );
// hide current block
data.items.old.add( data.items.visible ).find( '.slide-block' ).stop().fadeOut();
// animate clicked slide to large size
nextSlide.addClass( 'active' );
nextSlide.stop().animate({
width: _width * 0.7
});
},
onAfter: function(data) {
// show active slide block
data.items.visible.last().find( '.slide-block' ).stop().fadeIn();
}
},
onCreate: function(data){
// clone images for better sliding and insert them dynamacly in slider
var newitems = $('.slide',this).clone( true ),
_width = $('.wrapper').width();
$(this).trigger( 'insertItem', [newitems, newitems.length, false] );
// show images
$('.slide', this).fadeIn();
$('.slide:first-child', this).addClass( 'active' );
$('.slide', this).width( _width * 0.15 );
// enlarge first slide
$('.slide:first-child', this).animate({
width: _width * 0.7
});
// show first title block and hide the rest
$(this).find( '.slide-block' ).hide();
$(this).find( '.slide.active .slide-block' ).stop().fadeIn();
}
});
// Handle click events
$('.slider').children().click(function() {
$('.slider').trigger( 'slideTo', [this] );
});
// Enable code below if you want to support browser resizing
$(window).resize(function(){
var slider = $('.slider'),
_width = $('.wrapper').width();
// show images
slider.find( '.slide' ).width( _width * 0.15 );
// enlarge first slide
slider.find( '.slide.active' ).width( _width * 0.7 );
// update item width config
slider.trigger( 'configuration', ['items.width', _width * 0.15] );
});
});
$(function toggleSlidesB(){
$('.togglerB').click(function(e){
var id = $(this).attr('id');
var widgetId = id.substring(id.indexOf('-') + 1, id.length);
$('#' + widgetId).siblings('.sliderB').slideUp(600);
$('#' + widgetId).delay(500).slideToggle();
$(this).toggleClass('sliderExpandedB');
$('.closeSliderB').click(function(){
$(this).parent().hide('slow');
var relatedToggler='togglerB-'+$(this).parent().attr('id');
$('#'+relatedToggler).removeClass('sliderExpandedB');
});
});
});
$(function(){
toggleSlidesB();
});
</script>
</body>
</html>