Question

我对前端编码非常陌生。我正在使用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>

Answer 1

由于您只是在点击时更改颜色，因此您不需要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文件中定义活动类。

Answer 2

您可以在CSS文件中使用Media Queries来获取所需内容。

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

Answer 3

大致相同，当res小于440时点击导航栏将为白色： -

＆＃13;

<script>
      $('.navbar').click(function() {
           $(this).toggleClass('open');
      });
</script>

＆＃13;

@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);
    }
}

＆＃13;

<div class="navbar"></div>

＆＃13;

Answer 4

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

以下是一些可能符合您需求的代码：

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

如果屏幕宽度为420px或更小，这会使导航栏变白。

Answer 5

尝试以下方法：

$("#myNavbar").click(function () {
  $(".navbar-header").addClass("navbar-header-mobile");
});

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
      .navbar-header-mobile {
        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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果需要，您只需添加一些可以将其删除的内容。

Answer 6

我是通过JS中的类切换和CSS媒体查询来完成的。

JS -

$("#myNavbar").click(function() {
    $(".navbar-header").toggleClass('.active-nav')
});

CSS -

@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);
    }
}

Answer 7

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

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

    });
   }); 
</script>

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

7 个答案: