有人介意看看并解释我在这里做错了什么吗?
箭头在我身上翻转,需要单击 2 次才能使其正常工作。
有没有更好的方法来做到这一点?
谢谢。
请看这个链接:http: //jsfiddle.net/ddub/j3Dfr/
有人介意看看并解释我在这里做错了什么吗?
箭头在我身上翻转,需要单击 2 次才能使其正常工作。
有没有更好的方法来做到这一点?
谢谢。
请看这个链接:http: //jsfiddle.net/ddub/j3Dfr/
您目前拥有以下代码...
// sliding load board search option
$(document).ready(function () {
$(".topMenuAction").click(function () {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginTop: "-55px" //adjust as needed
}, 390);
$("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-4P1KGHJcd7w/T6MFfHRttBI/AAAAAAAACNA/JgwzfhkIrAs/w208-h208-n-k/arrow-up.png" height="50px" width="50px" alt="open" />');
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginTop: "24px"
}, 350);
$("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-Xgkkkl6QmoM/T6MFfAqNwWI/AAAAAAAACNA/Ghf_F21rz0E/w208-h208-n-k/arrow-down.png" height="50px" width="50px"alt="close" />');
$("#openCloseIdentifier").hide();
}
});
});
主要问题是您的 marginTop 动画只是向后。如果您将第一个设置为 24 像素而不是 -55 像素,然后将第二个设置为 -55 像素而不是 24 像素,就像下面的代码一样,它的行为应该符合您的预期!
// sliding load board search option
$(document).ready(function () {
$(".topMenuAction").click(function () {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginTop: "-55px" // Changed this to -55px
}, 390);
$("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-4P1KGHJcd7w/T6MFfHRttBI/AAAAAAAACNA/JgwzfhkIrAs/w208-h208-n-k/arrow-up.png" height="50px" width="50px" alt="open" />');
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginTop: "24px" // Changed this to 24px
}, 350);
$("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-Xgkkkl6QmoM/T6MFfAqNwWI/AAAAAAAACNA/Ghf_F21rz0E/w208-h208-n-k/arrow-down.png" height="50px" width="50px"alt="close" />');
$("#openCloseIdentifier").hide();
}
});
});
您的初始状态与状态不匹配hidden
;解决这个问题,它可以工作。
$(document).ready(function () {
$("#openCloseIdentifier").hide();
$("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-Xgkkkl6QmoM/T6MFfAqNwWI/AAAAAAAACNA/Ghf_F21rz0E/w208-h208-n-k/arrow-down.png" height="50px" width="50px"alt="close" />');
// Your original code...
}
您可能需要考虑提前定义一个带有该'<img ...>'
部分的字符串变量......
简单的; 检查 is(":hidden") 返回错误值,因为它尚未隐藏 - 由于负溢出,它只是不可见。添加
$("#openCloseIdentifier").hide();