Question

在我的网站上，当浏览器视图端口大小小于480px时，我希望将段落转换为手风琴菜单。

这是我用来实现的代码：

$(document).ready(function(){
    var pageWidth = $(window).width();  
    if ( pageWidth <= 480 ) {

$('.data > h3').addClass('jqlink');
$('.data ').addClass('jqbg');
$('.data>h3').append('<p>[+]</p>');
   $('.data > p').hide();   //hide the event 

   $('.data > h3').click(function(){   //clicked on the title
       if($(this).next().is(':visible')){      //is this question already visible?
        $(this).next().hide('fast');           //hide it (toggle)
       }else{   
        $('.data > p:visible').hide('fast');    //otherwise, hide whatever is currently visible
        $(this).next().show('fast');                    //show the question we clicked on
       }
   });

 } });

它非常出色，除了它只在浏览器首次加载时触发。如果浏览器在加载后重新调整大小，则代码将无法工作。

我知道.resize()命令。但是，只有在调整浏览器大小时，这似乎才有效。如果浏览器在首次加载时小于480px，则只有在用户调整浏览器大小时才会触发代码。

如何让代码在调整大小和浏览器加载时都能正常工作？

Answer 1

function checkWindowSize() {
   var pageWidth = $(window).width();  
   if ( pageWidth <= 480 ) {

   }
}

$(document).ready(function() {
    checkWindowSize();
    $(window).resize(checkWindowSize);  
});

应该做到这一点，并防止重复你的代码......

Answer 2

请参阅 .resize() 方法。

这是 Example ，或 full window version

在此示例中，首先在文档首次加载时检查窗口大小，然后监听窗口更改并等待它降至480px以下。

编辑：我已经更新了我的示例，以包含变量和条件，以确保只需要执行一次所需的操作。

Answer 3

在页面加载时，您可以在modernizr中使用媒体查询：http://www.modernizr.com/docs/#mq

if（Modernizr.mq（'only all and（max-width：480px）'）{

//开始你的协议

}

这将根据页面加载时480px下的所有视口进行设置。要调整大小，请使用您提到的resize（）

Jquery：根据浏览器大小执行事件

3 个答案: