Question

我一直在寻找各地的答案，但无法想出任何有效的方法。我正在构建我的投资组合并进行设置，以便当用户将鼠标悬停在页脚上时，它会使用javascript中的accordion函数进行扩展。我想删除此功能是用户在移动设备或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不安。

Here's a working fiddle，语法错误已修复，并添加了“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()事件处理程序的Here is some documentation，只要屏幕大小发生变化，就可以评估窗口宽度。

根据浏览器大小禁用javascript

1 个答案: