根据浏览器大小禁用JavaScript

Question

我一直在到处寻找答案，无法解决任何问题。 我正在构建我的作品集并进行设置，以便当用户将鼠标悬停在页脚上时，可以使用javascript中的手风琴功能进行扩展。 我想删除此功能，因为用户位于移动设备上或480px以下的任何屏幕上。 这是我的代码，如果有人可以帮忙，我将非常感谢！ 我尝试了if($(window).width() > 480){并且它似乎不起作用。

 $(document).ready(function($) { if ($(window).width() > 480) { $(window).resize(); $('#accordion').find('.accordion-toggle').hover(function() { //Expand or collapse this panel $(this).next().slideToggle('slow'); //Hide the other panels $(".accordion-content").not($(this).next()).slideUp('slow'); $(this).find('.accordion-content').stop(true, true).slideToggle() }, function() { $(this).find('.accordion-content').stop(true, true).slideUp() }).find('.accordion-content').hide() }); }); 

 .accordion-content { display: none; } .aboutPara { color: #000; text-align: left; margin-top: 5%; font-size: 1.2em; } .emailTag { color: white; font-family: BAUHS93; font-size: 1.5em; } .headPic2 { margin-top: 5%; width: 50%; height: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <footer id="accordion"> <div class="accordion-toggle"> <br> <h2 class="headline2" id="footerText">Jessica Levine - Web Designer and Blogger - <a class="footerLink" href="index.html">Learn More </a></h2><br> </div> <div class="accordion-content"> <div class="row"> <div class="col-md-5 col-md-offset-2 col-sm-offset-1"> <div class="aboutPara"> <h3>About Me</h3> I have worked for big corporations, small businesses and non-profit organizations. As a freelance web designer and a blogger, I strive to connect with people and strive for my designs to reflect that.<br><br> I work with clients who love what they do and are looking for affordable and attainable ways to see their visions reach the screen. Contact me if you are looking to build a website and/or brand for your business or would like help to re-create the website you have. I look forward to discussing your ideas and vision!<br> <a class="emailTag" href="mailto:levine.jessica76@gmail.com">Email Me</a> </div> </div> <div class="col-md-5"> <img src="images/headshot.jpg" class="headPic2" alt="Jessica Levine Headshot" /></div> </div> </div> </footer> 

Answer 1

您最初的方法工作得很好-唯一的问题是您的if条件具有不必要的结束符)和; 这使javascript感到沮丧。

这是一个有效的小提琴 ，已修复语法错误，并添加了“ alert（）”，以便您可以在测试悬停之前查看$(window).width() 。

这是固定的js：

$(document).ready(function($) {
  if ($(window).width() > 480) {
    $(window).resize();
    $('#accordion').find('.accordion-toggle').hover(function() {

      //Expand or collapse this panel
      $(this).next().slideToggle('slow');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('slow');


      $(this).find('.accordion-content').stop(true, true).slideToggle()
    }, function() {
      $(this).find('.accordion-content').stop(true, true).slideUp()
    }).find('.accordion-content').hide()

  }
});

注意 -如果所需的效果是悬停功能在不重新加载页面的情况下进行了更改，则我们需要更改对$(window).width()初始评估，因为它在doc.ready中发生，将关闭在DOM完成加载之后。 如果希望页面始终知道屏幕宽度，然后随屏幕尺寸的变化而动态变化，则需要添加一个事件侦听器，以“侦听”屏幕尺寸并对其进行操作。 这是有关jQuery的resize()事件处理程序的一些文档 ， 这些文档将允许您在屏幕尺寸变化时评估窗口宽度。