Jquery使用同一链接上下滑动元素不起作用
我有下面的代码,它向下滑动,但没有向上滑动。请您帮我找到错误,如果有更好的方法,我已经尝试了slideToggle,但这无法检查元素的状态,因为使用hide and show可以检查Jquery使用同一链接上下滑动元素不起作用,jquery,Jquery,我有下面的代码,它向下滑动,但没有向上滑动。请您帮我找到错误,如果有更好的方法,我已经尝试了slideToggle,但这无法检查元素的状态,因为使用hide and show可以检查$(“#my_div”)。is(“:hidden”) 这是我的密码: $("a.advanced_search_toggle").click(function() { if ($("#advanced_search_box").hasClass('closed')) { $("#advanc
$(“#my_div”)。is(“:hidden”)
这是我的密码:
$("a.advanced_search_toggle").click(function() {
if ($("#advanced_search_box").hasClass('closed')) {
$("#advanced_search_box").slideDown(function(){
$("a.advanced_search_toggle").text('Simple Search');
$("a.advanced_search_toggle").removeClass('down_arrow');
$("a.advanced_search_toggle").addClass('up_arrow')
$("a.advanced_search_toggle").removeClass('closed');
$("a.advanced_search_toggle").addClass('open');
});
} else {
$("#advanced_search_box").slideUp(function(){
$("a.advanced_search_toggle").text('Advanced Search');
$("a.advanced_search_toggle").removeClass('up_arrow');
$("a.advanced_search_toggle").addClass('down_arrow');
$("a.advanced_search_toggle").removeClass('open');
$("a.advanced_search_toggle").addClass('closed');
});
}
return false;
});
请注意,默认情况下,我添加了一个关闭到
#advanced_search_box
的类。您需要将.removeClass调用更改为“#advanced_search_box”,而不是“a.advanced_search_toggle”。它不会删除要检查的元素上的类名,因此不会向上滑动,只会向下滑动
$("a.advanced_search_toggle").click(function() {
if ($("#advanced_search_box").hasClass('closed')) {
$("#advanced_search_box").slideDown(function(){
$("a.advanced_search_toggle").text('Simple Search');
$("a.advanced_search_toggle").removeClass('down_arrow');
$("a.advanced_search_toggle").addClass('up_arrow')
$(this).removeClass('closed');
$(this).addClass('open');
});
} else {
$("#advanced_search_box").slideUp(function(){
$("a.advanced_search_toggle").text('Advanced Search');
$("a.advanced_search_toggle").removeClass('up_arrow');
$("a.advanced_search_toggle").addClass('down_arrow');
$(this).removeClass('open');
$(this).addClass('closed');
});
}
return false;
});
您正在尝试修改链接的属性,而不是元素。此外,还可以通过将对象指定给变量来创建对象,这有助于简化引用和优化。请尝试以下操作:
$("a.advanced_search_toggle").click(function() {
var link = $(this);
var box = $("#advanced_search_box");
if (box.hasClass('closed')) {
box.slideDown(function(){
link.text('Simple Search').removeClass('down_arrow').addClass('up_arrow');
box.removeClass('closed').addClass('open');
});
} else {
box.slideUp(function(){
link.text('Advanced Search').removeClass('up_arrow').addClass('down_arrow');
box.removeClass('open').addClass('closed');
});
}
return false;
});
演示:太棒了,谢谢你的回答,也谢谢你的演示。我现在看到了我的错误,以及如何更好地优化我的代码。