Question

我正在创建一个megamenu，它工作正常，直到我尝试延迟slideDown。我使用jQuery。 slideUp和slideDown的代码如下：

     {% block modals %}
     <!-- Modals -->
     <div id="adminDrop" class="reveal-modal large">
     Admin password to complete action<br/>
     <input type = "password", id="pass" />
     <button id = "test">Submit</button>
     <a class="close-reveal-modal", id="close">&#215;</a>
     {%endblock%}

当我刷新页面并将鼠标悬停在＆＃34; .dropdown＆＃34;元素它毫不拖延地向下滑动。但是，当我再次将鼠标悬停在它上面时，它会延迟就好了，就像我第一次在它上面盘旋时一样。每个菜单按钮也是如此（分别做每个＆＃34; .dropdown＆＃34;元素）我认为错误在$（document）.ready（）中，所以我等待整个页面加载，但这没有帮助。
你对我做错了什么有任何建议吗？

让我告诉你我菜单的一个片段。它还使用bootstrap。

$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).delay(500).slideDown("fast");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("fast");
           $(this).toggleClass('open');       
        }
    );
});

我把它剥了下来，所以它只显示了基本的骨架。

Answer 1

我不认为这是DOM准备好的错误没有深入细节（因为我无法测试你的代码）这里是我如何编写上面的

jQuery(function($){ // DOM ready. $ alias secured.

    $(".dropdown").hover(function(evt) {

       var mEnt = evt.type==="mouseenter";
       $(this).toggleClass('open')
              .find('.dropdown-menu')
              .not('.in')  // without seeing your HTML I'm not sure about this line
              .stop()
              .delay(mEnt?500:0)
              .slideToggle("fast");

    });          

});

在第一次调用它之前，如何在JS中加载函数？

1 个答案: