1

もう一度少し助けが必要です...私はこのコードを持っています：

<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();
        });
    });
})

クリックした場合：

正常に動作しますが、たまにしか動作しません。1回目のクリックは完全に機能し、2回目のlyricsClose divは消えて、表示されません。3回目はOK、4回目はKO、..。

jQueryコードに何か問題があると思います...それが何であるかわかりません...

ありがとう！

4

2 に答える 2

0

jQuery >= 1.7 を使用している場合は、次の委譲を使用します。

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

への変更：

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

...これは質問には答えませんが、ここに情報があれば、問題は解決するはずです。$(document) の代わりに、私は通常、内部コンテナーを好みますが、クリック イベントをトリガーする要素を含むコンテナーを好みます。

于 2012-09-11T17:25:26.217 に答える
0

hoverイベントとイベントを常に再バインドしていmouseleaveます。hoverイベントが呼び出さtoggleれると、すべてのバインドに対してイベントが呼び出され、前の実行に対抗します。

  • 2回目は表示され、非表示になります
  • 三度目は見せて、隠して、見せて
  • 4回目 見せて、隠して、見せて、隠して

再バインドする前にイベントのバインドを解除すると修正されるはずです。

$('#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

デモ- 再バインドする前にアンバインド

于 2012-09-11T17:40:29.117 に答える