Question

这是我的代码：

<nav class="navbar-collapse bs-navbar-collapse collapse " role="navigation">
            <!--
                stuff
            -->
</nav>

如果窗口的大小低于1025px，我想将类属性更改为＆＃39; navbar-collapse bs-navbar-collapse collapse＆＃39; 像这样：

$var=DB::table('reg')
             ->where('email', $c_email)
             ->where('password ', $c_pass)
             ->where('type', $c_pass)
             ->select('name','phone')
             ->first();

return view('farmer')->with('var', $var);

我试过这个Fiddle

它对我来说没有用。

Answer 1

您可以更改css以使用@media选择器而不是使用javascript来更改类吗？

@media(max-width:767px){}
@media(min-width:768px){}

http://jsfiddle.net/nvmh5bxb/

Answer 2

您可以使用matchMedia事件侦听器来监听css媒体查询匹配时的更改，并且不匹配，而不是每次调整px大小。

matchMedia("(max-width: 1025px)").addListener(evt => 
  $('nav').toggleClass('collapse', evt.matches)
)

当窗口宽度小于1025时更改类

2 个答案: