【发布时间】:2017-03-18 20:43:16
【问题描述】:
这是我的代码:
$(window).on("load scroll resize", function()
{
if( $( window ).width() >= 767)
{
$( ".boxlogo" ).css("display","block");
$( ".nav > li").css("margin-top","95px");`
var s = $(window).scrollTop();
if(s > 1)
{
$( ".boxlogo" ).css("width","140px");
$( ".navbar-color" ).css("background-color","#fff");
$( ".dropdown-menu > li > a") .css("color","#000");
$( ".dropdown > a ").css("color","#000");
$( ".nav > li > a").css("color","#000");
$( ".dropdown-menu > li > a") .css("text-shadow","2px 2px #fff");
$( ".dropdown > a ").css("text-shadow","1px 1px #fff");
$( ".nav > li > a").css("text-shadow","1px 1px #fff");
$( ".nav > li").css("margin-top","62px");
$( ".dropdown-menu").css("background-color","#fff");
}
else
{
$( ".boxlogo" ).css("width","200px");
$( ".navbar-color" ).css("background-color","transparent");
$( ".dropdown-menu > li > a") .css("color","#fff");
$( ".dropdown > a ").css("color","#fff");
$( ".nav > li > a").css("color","#fff");
$( ".dropdown-menu > li > a") .css("text-shadow","1px 1px #000");
$( ".dropdown > a ").css("text-shadow","1px 1px #000");
$( ".nav > li > a").css("text-shadow","1px 1px #000");
$( ".dropdown-menu").css("background-color","transparent");
$( ".nav > li").css("margin-top","96px");
}
}//if windows
else {
$( ".boxlogo" ).css("display","none");
$( ".nav > li").css("margin-top","5px");
}
});//scroll resize*/`
问题是:
$( ".boxlogo" ).css("display","block");
$( ".nav > li").css("margin-top","95px");
当窗口宽度为 767px 但为 784px 时不起作用...为什么?这更重要,因为这是菜单更改样式的关键。 我尝试使用 if( $( window ).innerWidth() >= 767) 但问题仍然存在。 我也尝试使用 css @media 来做到这一点,但根本不起作用。 我正在使用引导程序。
【问题讨论】:
-
先尝试添加您需要的相关属性的打印输出。
标签: jquery html twitter-bootstrap function width