7

オブジェクトがクリックされると表示されるが、メニュー自体以外の場所でクリックされると消えるjquery-uiメニューを実装しようとしています。

これは私がこれまでに持っているコードです：

$("div.item").click(function(e){
        $( "#menu" ).menu( );
        $("#menu").css("top",e.pageY);
        $("#menu").css("left",e.pageX);
        
       });

ここで、メニュー自体以外の場所でクリックが行われた場合、メニューを非表示にして破棄したいと思います。

4

6 に答える 6

10

オブジェクトがフォーカスを失ったときに発生するblurイベントを使用するとします。他の何かをクリックすると、フォーカスが失われます。

$("#menu").blur(function () {
    // Your code here to either hide the menu (.toggle())
    // or remove it completely (.remove()).
});
于 2012-12-14T07:50:57.807 に答える
1

上記のコードとコメントのための戦車にだけ（@ death-relic0、@ levi-botelho）

// create
$('#menu').blur(function() {
    $('#menu').hide();
});

// show
$('#menu').show().focus();
于 2013-04-27T19:37:03.440 に答える
0

JQuery UI selectmenuウィジェットで同じ問題が発生しましたが、JQuery UIselectmenucssファイルをインポートしなかったために問題が発生しました。選択メニューを自分でスタイリングしたかったので、そうしないことにしました。

私が自分のcssに追加[aria-hidden="true"] { display: none; }した問題を修正するために、このariaプロパティが、問題を修正しようとして遊んでいるときとの間trueで切り替わっていることに気づきました。false

于 2015-05-30T22:39:07.663 に答える
0

こんにちはこれは、jquerydatepickerを非表示にするためにOodlesTechnologiesで従うプロセスです。

モーダルの基本構造は次のようになります。

<button class="btn btn-info btn-lg" data-target="#myModal" data-toggle="modal" type="button">Open Modal</button>

そしてこれが私たちの基本的なCSSであり、定義された高さモーダル用です。

.modal-body {
    min-height: 500px;
    max-height: 500px;
    overflow: auto;
}

$(".modal-body").scroll(function(){
    $("#ui-datepicker-div").hide();
});

それが役に立てば幸い

于 2016-10-07T12:56:34.290 に答える
0

@Levi BotelhoAnsと@Ahmed-Anasのコメントから、ウィジェットの最初の作成で再利用しやすくしました。このようなもの：

const handleClickedOutside = function (e, ui) {
            var self = $(this);
            $("ui-selectmenu-menu").focus()
                .blur(function (event) {
                    self.selectmenu('close');
                });
        };

$("#first").selectmenu({
     change: ..,
     position: { .. },
     open: handleClickedOutside
});

$("#second").selectmenu({
     change: ..,
     position: { .. },
     open: handleClickedOutside
});
于 2021-04-07T08:49:03.177 に答える
0

jQueryUIのバージョン1.9のblurイベントに問題があるようです（メニュー項目にフォーカスを合わせると誤って生成されます！）

私の解決策:(＃jQueryMenuは私のメニューの最初の基本を表し、＃ShowMenuはメニューを呼び出すことができる画像を表します。）

$("#jQueryMenu")
    .menu()
    .hide()
    .blur( function () {
        $(this).hide();
    });
    
$("#ShowMenu")
    .click( function (){
        $(".jQueryMenu").show().focus();
    });
于 2021-09-07T13:02:47.160 に答える