Использование jquery «изменить размер» с функцией

У меня возникли проблемы с использованием 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-->

person JordanBarber    schedule 20.03.2015    source источник
comment
Значит проблема в меню, а не в ресайзе? Дело в том, что у нас здесь нет ничего, связанного с меню. Без HTML-кода, без JS-кода, без предварительного просмотра. Кроме того, что .is('*') должен делать? Разве это не проверка, является ли ваш элемент «чем угодно»?   -  person Jeremy Thille    schedule 20.03.2015
comment
Извините, добавляю html выше сейчас. .is('*') гарантирует запуск функции только в том случае, если эта контактная форма существует.   -  person JordanBarber    schedule 20.03.2015


Ответы (1)


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

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

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

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

person thecraighammond    schedule 20.03.2015