Question

我正在建立一个自适应网站，需要根据屏幕尺寸更改导航图标。

导航栏现在已经完成了，图片确实发生了变化..但是我们有一个小问题，我在这个fiddle中复制了。

向后和向前滑动视口以查看图标更改（我使用tinyurl来压缩链接，因此他们会加载一小部分。）

所以问题！所有的重点应放在“交叉”上。如果单击按钮（屏幕尺寸小于600px），则会出现。

当屏幕视口大小调整到600px以上时，十字架会消失，这很好。然而！如果视口再次缩小，则不会重新出现。

将其取回的唯一方法是关闭此按钮。

理论上，我将使用多个图像用于不同的屏幕尺寸..但这里只使用一个来保持简单。

正如您所看到的，我已经根据屏幕尺寸改变了蓝色和灰色图像..但问题在于让所选按钮执行相同操作。

这是Jquery

$(window).resize(function () {
    if (matchMedia('only screen and (max-width: 600px)').matches) {
        $('#settings_button').css({
            "background-image": "url(http://tinyurl.com/oydwfm9)"
        });
    }
    if (matchMedia('only screen and (min-width: 601px)').matches) {
        $('#settings_button').css({
            "background-image": "url(http://tinyurl.com/nszbfxl)"
        });
    }
});

$(document).ready(function () {

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


    $("#settings_button").click(function (e) {
        if (matchMedia('only screen and (max-width: 600px)').matches) {
            e.stopPropagation();
            $("#settings").toggle();

            if ($('#settings').is(":visible")) {
                $('#settings_button').css({
                    "background-Color": "darkred",
                        "background-image": "url(http://tinyurl.com/odrbvwa)"
                });
            };
            if ($('#settings').is(":hidden")) {
                $('#settings_button').css({
                    "background-Color": "",
                        "background-image": "url(http://tinyurl.com/oydwfm9)"
                });
            };
        }
    });

    $("#settings_button").click(function (e) {
        if (matchMedia('only screen and (min-width: 601px)').matches) {
            e.stopPropagation();
            $("#settings").toggle();

            if ($('#settings').is(":visible")) {
                $('#settings_button').css({
                    "background-Color": "darkred"
                });
            };
            if ($('#settings').is(":hidden")) {
                $('#settings_button').css({
                    "background-Color": ""
                });
            };
        }
    });
});

$(document).on("click", function (e) {
    $("#settings").hide();

    if ($('#settings').is(":hidden")) {
        $('#settings_button').css({
            "background-Color": "",
                "color": ""
        });
    };
});

$("#settings").on("click", function (e) {
    e.stopPropagation();
});

有什么想法吗？感谢

Answer 1

正如我在评论中所说（对未来的其他人可能有用），您必须影响窗口调整大小，具体取决于按钮的状态，是否单击。我使用flag来保存全局变量中的按钮状态，因此可以在所有函数中使用它。

http://jsfiddle.net/F3X6k/13/

根据屏幕大小更改选定的按钮图标

1 个答案: