Question

我使用jquery根据页面宽度更改html页面的内容。然后当页面准备就绪时（使用$(document).ready(function({\\there is some code here!}));）我想调用一些函数当页面宽度很小（小于835px）并在其位置放置其他内容时，我想要消除我的主菜单。页面大小调整对于此目标也很重要。我使用此代码执行此操作：

＆＃13;

function deleteMainMenu(){	
	var width = $(window).width();
	if(width <= 835){		
		$("#main-menu").empty();		
		$("#main-menu").append('add some html code here');
		$("#logo").attr('class', 'col-xs-6');
		$("#main-menu").attr('class', 'col-xs-6');

	}
	else{
		$("#logo").attr('class', 'col-sm-2');
		$("#main-menu").attr('class', 'col-sm-10');
		$("#main-menu").empty();
		$("#main-menu:empty").append('reset my old html code');
	}
}

＆＃13;

我通过以下代码调用这些函数：

$(document).ready(function(){           
    deleteMainMenu();
});

$( window ).resize(function(){
    deleteMainMenu();
});

当我调整页面大小时，我的代码工作正常，但是当我将页面宽度初始化为小于835px然后重新加载页面时，没有任何反应！

我在手机中对它进行了测试，似乎什么都没发生，但是当你滚动时，突然会发挥功能。

我该怎么办？提前致谢！

Answer 1

首先，我不认为javascript是这里的方式。对于这些情况，CSS有一些很好的选择。

<强>自举

查看你的课程（col-xs-6），看起来你正在使用bootstrap。 Bootstrap有一些非常好的功能，特别是对于这种事情。请查看here的响应式实用程序。

非引导

如果您不想使用引导实用程序，可以执行以下操作：

创建2个菜单（.menu_big和.menu_small）并使用媒体查询显示/隐藏它们。

.menu_big{
  display: none;
}
@media screen and (min-width: 835px) {
  .menu_small{
    display: none;
  }
  .menu_big{
    display: block;
  }
}

Demo here

当页面准备就绪时我想用jquery做一些事情（比如$（window）.ready（））但似乎它不起作用

1 个答案: