jquery - 将父级的悬停应用于 jquery ui 自动完成子级

Question

我的情况与我的其他问题类似prevent datepicker from triggering parent mouseleave ，但该解决方案似乎不适用于 jQuery UI 自动完成。

悬停如何也适用于自动完成子项？换句话说，如果一个 mouseenter 出现在自动完成建议上，#hoverMe 应保持打开状态。另外，关于如何处理选择在#hoverMe之外的选择的建议/代码，同时保持#hoverMe显示直到一个鼠标输入如果能回来那就太好了!

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

Answer 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上，并将一直显示，直到鼠标再次进入和离开输入(但是，我们始终可以更改此设置)。我用了open-event如果 #hideMe 不可见，则防止列表显示。希望这对您有所帮助，如果您有任何疑问，请告诉我!