отключить 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.

Вот рабочая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(), которая позволит вам оценивать ширину окна при каждом изменении размера экрана.