2

私は同様の状況にあり、他の問題により datepicker が親の mouseleave をトリガーできませんが、その解決策は jQuery UI オートコンプリートには適用されないようです。

オートコンプリートの子にもホバーをどのように適用できますか? つまり、mouseenterオートコンプリートの提案が表示されている場合は、#hoverMe開いたままにする必要があります。selectまた、外にある選択を処理する方法に関する提案/コードは、元に戻るまで表示された#hoverMeままになります!#hoverMemouseenter

http://jsfiddle.net/Kzp87/

html

<div id="hoverAnchor">hover me</div>
<div id="hoverMe" style="display:none">arbitrary text
    <input type="text" id="autocompletor"></div>
</div>

js

$(document).ready(function () {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $("#autocompletor").autocomplete({
        source: availableTags
    });
    var _enter = false;
    $("#hoverAnchor").add($("#hoverMe")).mouseenter(function () {
        if (!_enter) {
            $("#hoverMe").stop(true, false).animate({
                height: 'toggle',
                opacity: 'toggle'
            }, 200);
        }
        _enter = true;
    }).mouseleave(function () {
        _enter = false;
        $("#hoverMe").stop(true, false).animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 200);
    });
});
4

2 に答える 2

1

次のようにしてみてはどうでしょうか。

$(document).ready(function () {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"];

    var _enter = false;
    $("#autocompletor").autocomplete({
        source: availableTags,
        open: function (event, ui) {
            //in the event someone types into the input as #hoverMe is closing, this will prevent the list from showing
            if (!_enter) $('.ui-autocomplete').hide();
        }
    });

    $("#hoverAnchor").add($("#hoverMe")).mouseenter(function () {
        if (!_enter) {
            $("#hoverMe").stop(true, false).animate({
                height: 'toggle',
                opacity: 'toggle'
            }, 200);
        }
        _enter = true;
    }).mouseleave(function () {
        if (!$('.ui-autocomplete').is(':visible') && _enter) { //check if autocomplete is open
            $("#hoverMe").stop(true, false).animate({
                height: 'toggle',
                opacity: 'toggle'
            }, 200);
            _enter = false;
        }
    });
});

デモ: http://jsfiddle.net/dirtyd77/Kzp87/3/

基本的に、リストは表示され#hoverAnchor、マウスがinput追加の時間に出入りするまで表示されたままになります (ただし、これはいつでも変更できます)。open-eventが表示されていない場合にリストが表示されないようにするために を使用しました#hideMe。ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-04-24T17:08:29.350 に答える