Использование jquery 'resize' с функцией

Question

У меня возникли проблемы с использованием jquery 'resize', чтобы убедиться, что моя функция работает как при загрузке мобильного, так и в ручном изменении размера окна. Вот мой JQuery

if ($('.generic').is('*')) { 

      function contactDropDown() { 

       if ($(window).width() < 768) { 

        var formDown = $('.mobile-form-expander img'); 
        var hiddenForm = $('.template-e form:hidden'); 

        formDown.click(function() { 
         var south = $(this).attr("src"); 
         var north = $(this).attr("data-swap"); 
         hiddenForm.slideToggle("fast"); 
         $(this).attr('src', north).attr("data-swap", south); 
        }) 
       } 
      } 

     $(window).on('resize', contactDropDown); 
     // $(window).on('load resize', contactDropDown); 

     } 

Я изначально был это упрощено:

if ($(window).width() < 768) { 

        var formDown = $('.mobile-form-expander img'); 
        var hiddenForm = $('.template-e form:hidden'); 

        formDown.click(function() { 
         // var south = $(this).attr("src"); 
         // var north = $(this).attr("data-swap"); 
         hiddenForm.slideToggle("fast"); 
         // $(this).attr('src', north).attr("data-swap", south); 
        }) 
       } 
      } 

оригинальный функция работает, но мне нужно было его работать на ручном изменении размера, так что я использовал выше метод, который обычно работает для меня. Проблема в том, что теперь мое расширяемое меню работает при изменении размера, затем щелкая, но оно несколько раз перескакивает вверх и вниз. Буду признателен за любую оказанную помощь.

Вот HTML:

<div class="content template template-e"> 
     <div class="main-wrap"> 
      <h1>Contact Us</h1> 
      <p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-6 contact-left"> 
         <div class="row"> 
          <div class="mobile-form-expander"> 
           <p>Contact Form<img src="/sites/all/themes/merge/img/blue-down.png" data-swap="/sites/all/themes/merge/img/blue-up.png" /></p> 
          </div><!--end mobile-form-expander--> 
          <form class="generic"> 
           <div class="control-group col-sm-6"> 
            <label for="first-name">First Name*</label> 
            <input id="first-name" type="text"> 
           </div><!--end control-group--> 
           <div class="control-group col-sm-6"> 
            <label for="last-name">Last Name*</label> 
            <input id="last-name" type="text"> 
           </div><!--end control-group--> 
           <div class="control-group col-sm-6"> 
            <label for="state">State*</label> 
            <select name="state" id="state"> 
             <option value="nc">NC</option> 
            </select> 
            <!-- <label for="state">State*</label> 
            <input id="state" type="text"> --> 
           </div><!--end control-group--> 
           <div class="control-group col-sm-6"> 
            <label for="zip">Zip Code*</label> 
            <input id="zip" type="text"> 
           </div><!--end control-group--> 
           <div class="control-group full"> 
            <label for="comments">Comments*</label> 
            <textarea id="comments"></textarea> 
           </div><!--end control-group--> 
           <div class="control-group col-sm-4"> 
            <input id="submit" type="submit" class="body-button" value="send"> 
           </div><!--end control-group--> 
          </form> 
         </div><!--end row--> 
        </div><!--end contact-left--> 
        <div class="col-md-6 contact-right"> 
         <div class="contact-block"> 
          <h2>Phone Numbers</h2> 
          <p>Admissions Direct: 478-445-1283 or 478-445-2774</p> 
          <p>Toll Free (in Georgia): 1-800-342-0471</p> 
          <p>Main GC Switchboard: 478-445-5004</p> 
         </div><!--end contact-block--> 
        </div><!--end contact-right--> 
       </div><!--end row--> 
      </div><!--end container--> 
     </div><!--end main-wrap--> 
    </div><!--end content--> 

Answer 1

Прости меня, если я пропускаю пункт здесь немного, но это может быть идея абстрактной любой функциональности изменения размера из в функции OnResize(), а затем запустить что в функциях document.ready() или after и init(), которые у вас могут быть.

Затем запустите это на window.resize(), чтобы накрыть любое ручное изменение размера окна.

Таким образом, функция onResize() будет проверять ширину окна и выполнять любые необходимые функции. Это означает, что вы также можете вернуться обратно с помощью else {}, если это необходимо.

Я бы хотел сказать, что это лучшие способы организовать это, но я не хотел бы отклоняться от того, что у вас есть. Также я думаю, что if ($('.generic').is('*')) { будет немного более эффективным, поскольку if ($('.generic').length) {, если все, что вы хотите сделать, это проверить его существование.