[英]Issue with slideUp/slideDown JS
我一直在这里使用此代码:
$(document).ready(function(){
$('a[href*=#]').bind('click', function(){
var $href = $(this).attr('href')
$('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1200, 'easeInOutExpo');
return false;
});
$(".category-slider-trigger").click(function(e){
e.preventDefault;
$this = $(this);
var isVisible = $this.next().is(":visible");
$(".category-slider-content").stop(true,true).slideDown('slow');
$(".trigger-symbol").attr('src', '/images/plus.png');
if (!isVisible) {
$this.find(".trigger-symbol").attr('src', '/images/minus.png');
$this.next().stop(true,true).slideUp('slow');
}
return false;
});
});
在此html上:
<div class="category-slider-content">
<div class="grid_1"> </div>
<div class="grid_10 category-filter-area">
<a class="stock-latest-additions" href="/stock/latest-additions">Latest additions</a>
<?
foreach ($stock_categories as $cat) {
echo("<h2 class=\"stock-category-title\">".$cat['title'].":</h2>");
echo("<ul class=\"stock-categories-list\">");
foreach ($cat['sub_categories'] as $sub_cat) {
echo("<li><a href=\"/stock/".$util->formatCategoryParam($sub_cat['title'])."\">".$sub_cat['title']."</a></li>");
}
echo("</ul>");
echo("<div class=\"clear\"></div>");
}
?>
</div>
<div class="grid_1"> </div>
显示/隐藏类别
但是我在功能上有问题。 单击链接时,类别从顶部显示并向下滑动,但不会向上滑动。
我在这里设置了jsFiddle ... http://jsfiddle.net/CwP8w/
有什么建议么?
谢谢,R
工作演示 http://jsfiddle.net/GmpZb/3/
良好的API: http : //api.jquery.com/slideToggle/
如果仅使用slideToggle进行显示和隐藏,则可以避免使用完整的isVisible逻辑。
这会有所帮助。 B-)
代码已更改
$(".category-slider-content").stop(true,true).slideToggle('slow');
完整的代码
$(document).ready(function() {
$('a[href*=#]').bind('click', function() {
var $href = $(this).attr('href')
$('html,body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 1200, 'easeInOutExpo');
return false;
});
$(".category-slider-trigger").click(function(e) {
e.preventDefault;
$this = $(this);
var isVisible = $this.next().is(":visible");
$(".category-slider-content").stop(true, true).slideToggle('slow');
$(".trigger-symbol").attr('src', '/images/plus.png');
if (!isVisible) {
$this.find(".trigger-symbol").attr('src', '/images/minus.png');
//$this.next().stop(true,true).slideUp('slow');
}
return false;
});
});
$('a[href*=#]').bind('click', function(){
var $href = $(this).attr('href');
$('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1200, 'easeInOutExpo');
return false;
});
$(".category-slider-trigger").click(function(e){
e.preventDefault;
$this = $(this);
var isVisible = $('.category-slider-content').is(":visible");
if (!isVisible) {
$('.category-slider-content').slideDown();
$this.find(".trigger-symbol").attr('src', '/images/minus.png');
}else{
$('.category-slider-content').slideUp();
$this.find(".trigger-symbol").attr('src', '/images/plus.png');
}
return false;
});
我真的不知道第一个函数应该做什么,但是无论如何:
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault;
$('html,body').animate({scrollTop: $(this.href).offset().top}, 1200, 'easeInOutExpo');
});
$(".category-slider-trigger").on('click', function(e) {
e.preventDefault;
$(".category-slider-content").stop(true, true).slideToggle('slow');
$(".trigger-symbol").attr('src', $(this).is(':visible')?'/images/plus.png':'/images/minus.png');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.