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-->