在调整大小和当前窗口大小时触发jQuery?

时间:2016-09-18 22:28:24

标签: jquery resize responsive

这个小提琴: http://jsfiddle.net/remibreton/Aurk8/

当窗口调整大小时会发生事件,但是我想要发生的是,如果窗口已经处于所述大小,那么它应该运行代码,此时,窗口会侦听调整大小的触发器,但如果以调整大小的宽度刷新页面,则无效。

实际上,如果屏幕尺寸低于992像素宽,我想将列表转换为选择菜单,我想我可以通过检查窗口大小来做到这一点...如果它是992像素,那么添加一个类。然后该类运行将列表转换为项目的魔法......例如:

jQuery(document).ready(function()
{
jQuery(window).on('resize', function(event){
var windowSize = jQuery(window).width();
if(windowSize < 992){
    jQuery( "ul#intro-tabs" ).addClass( "tabs-select" );
} else {
    jQuery( "ul#intro-tabs" ).removeClass( "tabs-select" );
}
});

// Turn a list in to an select menu   

jQuery('ul.tabs-select').each(function(){
var list=jQuery(this),
    select=jQuery(document.createElement('select')).insertBefore(jQuery(this)
.hide()).change(function(){
  window.location.href=jQuery(this).val();
});
jQuery('>li a', this).each(function(){
  var option=jQuery(document.createElement('option'))
   .appendTo(select)
   .val(this.href)
   .html(jQuery(this).html());
  if(jQuery(this).attr('class') === 'selected'){
    option.attr('selected','selected');
  }
});
list.remove();
});

});

0 个答案:

没有答案