调整大小时更改导航栏标题颜色
调整大小时更改导航栏标题颜色
提问于 2017-05-16 22:13:10
我对前端编程非常陌生。我正在使用Bootstrap 3创建我自己的响应式网站。
当我调整浏览器窗口的大小以模拟电话屏幕的大小时，我想要导航栏颜色(导航标题颜色？)要在菜单图标上更改为白色，请单击。
我希望它在页面加载时保持透明，这是有效的。我希望标题改为白色，同时滚动，这也是工作。单击汉堡包菜单图标时，可折叠的导航标题下拉以显示菜单项，但背景保持透明，导致菜单项位于下面的内容之上。
我写了以下脚本，但它似乎不起作用。有没有人有建议？
<script>
var windowsize = $(window).width();
$(window).resize(funtion() {
windowsize = $(window).width();
if (windowsize < 440) {
$("#myNavbar").click(function () {
$(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
});
};
});
</script>回答 7
Stack Overflow用户
发布于 2017-05-16 22:20:18
您可以在CSS文件中使用Media Queries来满足您的需求。
@media screen and (max-width: 300px) {
nav {
background-color: #ffffff;
}
}Stack Overflow用户
发布于 2017-05-16 22:21:03
由于仅在单击时更改颜色，因此不需要window.resize()事件。
<script>
$("#myNavbar").click(function () {
windowsize = $(window).width();
if (windowsize < 440) {
$(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
}
});
</script>不过，我建议将动态CSS也改为使用类。JS将更改为$(".navbar-header").addClass("active");，您可以在您的css文件中定义活动类。
Stack Overflow用户
发布于 2017-05-16 22:22:44
大致就像这样，当res低于440时，点击导航栏将是白色的:-
<script>
$('.navbar').click(function() {
$(this).toggleClass('open');
});
</script>@media only screen and (max-width: 440px) {
.navbar.open {
background-color: #ffffff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
-moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
}
}<div class="navbar"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44003915
复制相关文章
相似问题
腾讯云开发者
