Question

所以我一直试图通过点击菜单框（类似于中等菜单）来设置菜单动画。到目前为止一切正常，并且在完整的页面刷新时，JQuery事件第一次触发而没有任何问题。

然而，当我点击菜单中的链接时，它会带我到页面，但是第一次点击时菜单按钮不起作用，但它在第二次点击时完全正常。这种情况一定会发生。

我已经看过其他几个与此相似的问题，但他们的解决方案都没有解决我的问题。有没有人有任何想法可能会出错？哦，我也在使用Ruby on Rails 4，如果这会影响它的话。

菜单按钮HTML

<div id="menu-hex"></div>

菜单HTML

<ul>
    <li>
        <%= link_to(root_url) do %>
            <h3 class="am"><span class="icon-home profile-icos"></span> Daily Feed</h3>
        <% end %>
    </li>
    <li class="coming-soon">
        <%= link_to(root_url) do %>
            <h3 class="am"><span class="icon-fire profile-icos"></span> Improve</h3>
        <% end %>
    </li>
    <li class="coming-soon">
        <%= link_to(root_url) do %>
            <h3 class="am"><span class="icon-star profile-icos"></span> Events</h3>
        <% end %>
    </li>
    <li class="coming-soon">
        <%= link_to("/login") do %>
            <h3 class="am"><span class="icon-bookmarks profile-icos"></span> Communities</h3>
        <% end %>
    </li>
</ul>

CSS

#menu-hex {
    position: absolute;
    left: 6px;
    top: 7px;
    background-image: url('homehex.png');
    width: 65px;
    height: 65px;
    background-size: 100%;
    cursor: pointer;
    z-index: 20;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}

JQuery的

var menuOn = false;
var duration = 250;

$(document).on("click", "#menu-hex", function(e) {
    if(menuOn == false) {
        openMenu();
    }else {
        closeMenu();
    }

});

$(document).on("click", ".overlay", function(e) {
    if(menuOn == true) {
        closeMenu();
    }

});


function openMenu() {

    $(".overlay").css( "display", "block" );

    $("#focusimage").animate({opacity: 0.2}, duration);
    $("#spot-content").animate({"left":"-300px"}, duration, function() 
        { $("#spot-content").css( "display", "none" ) });

    $("#menu").animate({"left":"25px", opacity: 1.0}, duration);

    menuOn = true;
}

function closeMenu() {

    $(".overlay").css( "display", "none" );

    $("#focusimage").animate({opacity: 1.0}, duration);

    $("#spot-content").css( "display", "block");
    $("#spot-content").animate({"left":"25px"}, duration);

    $("#menu").animate({"left":"-300px", opacity: 1.0}, duration);

    menuOn = false;
}

Answer 1

你为什么使用：

$(document).on("click", ".overlay", function(e) {
    if(menuOn == true) {
        closeMenu();
    }

});

而不是：

$(".overlay").on("click", function(e) {
    if(menuOn == true) {
        closeMenu();
    }
});

Answer 2

尝试替换以下块：$(document).on("click", "#menu-hex", function(e) { if(menuOn == false || '')问题是（如果我没错），在重新加载后第一次单击时，menuOn变量未设置，因此仅在第二次单击后才有效。

Answer 3

我是jQuery的新手，但我觉得你的脚本不是在等待文档加载。您是否尝试过使用此方法包围脚本：

$(document).ready(function(){

//your code

});

您的代码可能没有问题，但可能与您执行它的方式有关。我希望它有所帮助。

选中此article可能对您有帮助。

Answer 4

感谢您的回复。

我发现了我的问题。这是Rails 4使用turbolinks。我的解决方案在这里找到： Rails 4: how to use $(document).ready() with turbo-links

JQuery .on（“点击”）仅在第二次点击后触发

4 个答案: