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

我在构建响应式网站，需要根据屏幕大小更改导航图标。根据屏幕大小更改选定的按钮图标

现在导航栏已经完成了很多工作，图像确实发生了变化..但是这是一个我遇到的小问题，我在fiddle中进行了复制。

滑动视窗前进和后退，看图标改变（我使用TinyURL的压缩环节，所以他们会加载一小部分比较慢。）

这样的问题！所有焦点都应放在如果单击按钮（屏幕尺寸小于600像素）时出现的“交叉”。

当屏幕视口的大小超过600像素时，交叉消失，这很好。然而！如果视口再次缩小，它不会再出现。

要让它恢复的唯一方法是单击该按钮并打开。

从理论上讲，我会为不同的屏幕大小使用多个图像..但只是在这里使用它来保持简单。

正如你所看到的，我已经有一个蓝色和灰色的图像来改变取决于屏幕大小..但问题是让选定的按钮来做同样的事情。

这里是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(); 
});

任何想法？谢谢

来源

2013-11-25 user2950370

调整大小适用于蓝色和灰色气泡。但是一旦十字架显示出来，即使你缩小了窗户的尺寸或增加了窗户的大小，十字架也不会再次成为泡影。问题是，当你调整你的窗口大小时，处理蓝色和灰色气泡的第一个函数被调用，而不是必须管理十字形的函数。我建议设置一个像'blueGreyEnable'这样的标志。如果显示子菜单（单击按钮），则将管理蓝色的功能禁用为灰色气泡。让我更新小提琴，会更容易^^ – TCHdvlp

这里是http://jsfiddle.net/Bundaberg/F3X6k/12/你可以删除我添加的所有'console.log'。如果你确定，我会把它作为答案。 – TCHdvlp

奇怪的是，当我最后一次检查时，'十字'图像在600px宽度以下工作正常。我必须在某处包含错误。（$（“＃settings_button”））。click（function（e）{）'它可以合并它们！我不明白你的意思是'设置一个标志'？我对jquery的知识比较缺乏:) – user2950370

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

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

来源

2013-11-25 16:40:31 TCHdvlp

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

回答

相关问题