Javascript 调整大小时更改导航栏标题颜色

我对前端编码非常陌生。我正在使用Bootstrap3创建自己的响应式网站

当我调整浏览器窗口的大小以模拟手机屏幕的大小时，我想要导航栏颜色导航标题颜色？要在菜单图标上更改为白色，请单击

我希望它在页面加载时保持透明，这是可行的。我希望标题在滚动时变为白色，这也起作用。单击汉堡包菜单图标时，可折叠导航标题会下拉以显示菜单项，但背景保持透明，导致菜单项位于下面内容的顶部

我写了以下脚本，但似乎不起作用。有人有什么建议吗

<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>

您可以在CSS文件中使用所需的内容

@media screen and (max-width: 300px) {
    nav {
        background-color: #ffffff;
    }
}

---

由于您仅在单击时更改颜色，因此不需要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.addClassactive；您可以在css文件中定义活动类。

大致如下，当res小于440时单击，导航栏将为白色：-

$'.navbar'。单击函数{ $this.toggleClass'open'； }; @仅介质屏幕，最大宽度：440px{ .navbar.open{ 背景色：ffffff； -网络工具包盒阴影：0px 1px 4px 0px rgba180、180、180、0.5； -moz盒阴影：0px 1px 4px 0px RGBA180180，0.5； 盒影：0px 1px 4px 0px RGBA180180，0.5； } }

---

使用媒体查询是使css属性依赖于屏幕大小的最佳方法

以下是一些可能适合您需要的代码：

.nav-bar {
    @media only screen and (max-width: 420px) {background:#fff;}
}

如果屏幕宽度小于等于420px，导航栏将变为白色。

请尝试以下操作：

$myNavbar.clickfunction{ $.navbar-header.addClassnavbar-header-mobile； }; /*超小型设备、手机*/ @仅介质屏幕和最小宽度：480px{ .导航栏标题移动{ 背景色：ffffff； -网络工具包盒阴影：0px 1px 4px 0px rgba180、180、180、0.5； -moz盒阴影：0px 1px 4px 0px RGBA180180，0.5； 盒影：0px 1px 4px 0px RGBA180180，0.5； } }

---

我会通过JS中的类切换和CSS媒体查询来实现这一点

JS-

CSS-

---

解决了这个问题。这不仅仅是标题颜色，我还需要更改可折叠菜单的背景。所以我使用了和标题颜色相同的逻辑。捕获可折叠导航栏的单击功能并切换颜色。这是我的最后一段代码：

<script>
  $(function (){
    $(".navbar-toggle").click(function() {
        if ($(window).width() < 440) {
            $(".navbar-collapse").toggleClass("menuActive");
            $(".navbar-header").toggleClass("menuActive");
        } 

    });
   }); 
</script>

---

不要在事件中放置事件。媒体查询无法解决他的要求，即我希望菜单图标单击时导航栏颜色变为白色。您的.resize调用缺少c in函数。。。你原来的剧本就是这样的吗？还是这只是一个打字错误？很好！这是原稿中的一个输入错误。我从所有答案中提取输入信息，解决了这个问题。采纳了您关于使用自定义CSS类的建议。非常感谢。但是我仍然需要添加和删除类。toggleClass是一个很棒的建议！我用它来让它工作。但我没有使用@media only..只是window.width.实际上toggleClass工作得更好。谢谢你的意见。好观点@Bhuvana-我已经更新了我的答案。很高兴你成功了：解决了这个问题。这不仅仅是标题颜色，我还需要更改可折叠菜单的背景。所以我使用了和标题颜色相同的逻辑。捕获可折叠导航栏的单击功能并切换颜色。这是我的最后一段代码：$function{$.navbar-toggle.clickfunction{if$window.width<440{$.navbar-collapse.toggleClassmenuActive；$.navbar-header.toggleClassmenuActive；}；}；

@media only screen and (min-width:440px) {
    .navbar-header.active-nav {
        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>
  $(function (){
    $(".navbar-toggle").click(function() {
        if ($(window).width() < 440) {
            $(".navbar-collapse").toggleClass("menuActive");
            $(".navbar-header").toggleClass("menuActive");
        } 

    });
   }); 
</script>