0

我在使用 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-->
4

1 回答 1

0

如果我在这里遗漏了一点，请原谅我，但将任何调整大小功能抽象为 onResize() 函数然后在 document.ready() 或 after 和 init() 函数上运行它可能是一个想法有。

然后在 window.resize() 上运行它以覆盖您以进行任何手动调整窗口大小。

因此，您的 onResize() 函数将检查窗口宽度并执行任何必要的功能。这意味着如果需要，您还可以使用 else{} 恢复。

我想说这是组织这个的更好方法，但我不想偏离你所拥有的。此外，我认为if ( $('.generic').is('*') ) {会更有效率，就if ( $('.generic').length ) {好像你想要做的就是检查它的存在。

于 2015-03-20T15:14:05.747 回答