0

コードに小さな問題があり、それを解決する方法がわかりません。

詳細なコメントを含むフィドルは次のとおりです。http://jsfiddle.net/4aZbp/

基本的に、要素のリストがあります。各要素にカーソルを合わせると、「+」アイコンが表示されます。

そのボタンをクリックすると、小さなメニューが表示されます。

そのメニューはli内にはありません。ページの上部にある絶対的な隠しメニューであり、jQuery で配置しています。したがって、すべての要素に対して 1 つのメニューです。

そのメニューは、ユーザーがマウスを離すまで開いたままにする必要があります<li>。ここまでは順調ですね、

私の問題は、ユーザーがそのメニューの内側をクリックしようとしたときに開いたままにする必要があることです。メニューがdivの外にあり、そこにとどまる必要があるため、それを機能させることができません。

解決策はありますか？フィドルを確認してください

http://jsfiddle.net/4aZbp/

$(document).ready( function() {

    // Position the menu & show it at the right place when you click on the "+" button

    $(".open-playlist-link").click(function() {       
        var offset = $(this).offset();
        var offsetTop = Math.round(offset.top);
        var offsetLeft = Math.round(offset.left);

        var menu = $('.add-to-playlist-menu');

        menu.css( {
            top : offsetTop +20,
            left : offsetLeft }
        );
        menu.toggleClass('display-none');      
    });

    // Hide the "+" button when you leave the wrapper of the <li> 

    $(".wrap").mouseenter(function() {
            $(this).children('.add-to-playlist-icon').removeClass('display-none');
        }).mouseleave(function(){
            $(this).children('.add-to-playlist-icon').addClass('display-none');
    });

    // Hide the menu when you leave the wrapper, but you need to be able to click the link inside the menu. When you leave the menu, we hide it. ISSUE HERE.

    $('.wrap').mouseleave(function(){
        $('.add-to-playlist-menu').addClass('display-none');
    });
});​
4

1 に答える 1

0

あなたが望むようにそれを機能させる最も簡単な方法は、メニューを移動することであると仮定しますli。

これは完全に完成したデモではありませんが、必要な動作を追加するのは簡単なはずです（LIが残った後のメニューの非表示など）

主な更新はここにあります（新しい行$(this).parent().append(menu);と削除されたcssポジショニング）：

  $(".open-playlist-link").click(function() {       
        var offset = $(this).offset();
        var offsetTop = Math.round(offset.top);
        var offsetLeft = Math.round(offset.left);

        var menu = $('.add-to-playlist-menu');    

        menu.toggleClass('display-none');      
        $(this).parent().append(menu);
    });

menu divは内部にないためLI、このイベントは、マウスをmenudivに移動するたびに発生します。これを回避するには、メニューdivを内部に含める必要がありますLI（実際には、div.wrap提供されたコードに従って）。

于 2012-10-29T14:30:14.167 に答える