jQuery div间歇性地显示div

时间:2012-09-11 17:14:17

标签: jquery html

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

<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代码出了问题...无法理解它是什么......

谢谢!

2 个答案:

答案 0 :(得分:0)

如果您使用的是jQuery&gt; = 1.7,请使用以下委托:

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

更改为:

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

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

答案 1 :(得分:0)

您不断重新约束hovermouseleave事件。 当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

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