Question

我需要再次帮助......我有这个代码：

<div id="lyrics">
    <div id="lyricsClose"></div>
    <div id="ajax-content"></div>
</div>

隐藏

id 歌词和lyricsClose 。我基本上想要一个显示歌词的叠加div，右上角有一个关闭按钮。所以，使用jQuery：

$(document).ready(function() {
$('[id^=showContent]').click(function(e) {
    e.preventDefault(); // Prevent link acting as link
    $("body").append("<div id='lyricsOverlay'></div>");
    $("#lyricsOverlay").height($(document).height());
    $('#lyrics').css("display", "table"); 
        $('#lyrics').hover(function() {
            $('#lyricsClose').toggle();
        });         
        $('#lyrics').mouseleave(function() {
            $('#lyricsClose').css("display", "none");
        });
    $('#lyrics').show(); // Show content layer
    $('#lyricsOverlay').click(function() { 
            $('#lyrics').hide();
            $('#lyricsOverlay').remove();
        });     
    $('#lyricsClose').click(function() { 
            $('#lyrics').hide();
            $('#lyricsOverlay').remove();
        });
    });
})

点击：

工作正常，但有时候。第一次点击工作完美，第二次lyrics关闭div消失，并没有显示。第三次OK，第四次KO，......

我认为我的jQuery代码出了问题...无法理解它是什么......

谢谢！

Answer 1

如果您使用的是jQuery＆gt; = 1.7，请使用以下委托：

$('[id^=showContent]').click(function(e) {

更改为：

$(document).on("click","[id^=showContent]",function(e){

...这不回答问题，但鉴于此处的信息，应该解决问题。我通常更喜欢内部容器，而不是$（文档），而是包含触发click事件的元素。

Answer 2

您不断重新约束hover和mouseleave事件。当hover事件调用toggle时，它会为每个绑定调用它，然后执行前一次执行。

第二次显示，隐藏
第三次显示，隐藏，显示
第四次显示，隐藏，显示，隐藏

在重新绑定之前取消绑定事件应该修复它。

$('#lyrics').unbind("hover").hover(function() {
    $('#lyricsClose').toggle();
});

$('#lyrics').unbind("mouseleave").mouseleave(function() {
    $('#lyricsClose').css("display", "none");
});

此外，正如您已设置#lyrics .show()的显示值是多余的。

/// not needed because as soon as you set above display to table it becomes visible
$('#lyrics').show(); // Show content layer

jQuery div间歇性地显示div

2 个答案:

DEMO - 在重新绑定之前取消绑定