Question

有人会介意看看我在这里做错了吗？

箭头正在向我翻转，只需点击2次即可使其正常工作。

有更好的方法吗？

感谢。

Answer 1

您目前有以下代码......

// 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动画只是向后。如果您将第一个24px而不是-55px，然后是第二个-55px而不是24px，就像下面的代码一样，它应该按照您期望的方式运行！

// 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();
        }
    });
});

Answer 2

您的初始状态与hidden状态不匹配;修复，it works。

$(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 ...>'部分定义字符串变量...

Answer 3

简单; check for is（“：hidden”）返回错误值，因为它尚未被隐藏 - 由于负溢出而无法看到它。添加

 $("#openCloseIdentifier").hide();

jQuery滑块的行为不符合预期

3 个答案: