Question

我在使用jquery＆＃39; resize＆＃39;时遇到了一些麻烦。确保我的功能适用于加载移动或手动调整窗口大小。这是我的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 ) {会更有效率，如果你想做的就是检查它的存在。

使用jquery＆＃39;调整大小＆＃39;有功能

1 个答案: