Parent 失去对 Kendo UI 上下文菜单的关注

Question

我在我的页面上悬停了侧边栏，其中有 links 用于使用搜索过滤器。每个 link 都有点击侦听器，可以为当前 link 的某些操作打开 Kendo UI 上下文菜单。当我打开 Kendo 上下文菜单时，侧边栏悬停消失了。如何在用户鼠标进入上下文菜单时保持侧边栏焦点？

JS Fiddle is here

JavaScript

$(document).ready(function() {
    $('#nav').hover(function(){
        $(this).animate({width:'200px'},150);
    },function(){
        $(this).animate({width:'35px'},150);
    });

    $("#menu").click(function(e) {
        var menuHtml = $("#menu-template").html();

        $(menuHtml).kendoContextMenu({
            target: $(e.currentTarget),
            close: function() {
                this.destroy();
            },
            select: function(e) {
                var sel = $(e.item).attr('id');
            }
        }).data("kendoContextMenu").open();
    });
});

HTML

<div id="nav">
    <ul>
        <li><a id="menu">Click here</a></li>
    </ul>
</div>

<script id="menu-template" type="text/x-kendo-template">
    <ul>
        <li id='rename'>Rename</li>
        <li id='delete'>Delete</li>
    </ul>
</script>

CSS

#nav { 
    width:200px;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    background:#666;
    color:#fff;
    overflow:hidden;
}

#nav ul {
    margin:0;
    padding:0;
    width:200px;
    margin:40px;
    list-style:none;
}

#nav a span {
    margin:0 10px 0 0;
}

#nav a {
    color:#fff;
    font-size:14px;
}

Answer 1

我遇到了类似的问题，我用那种丑陋但有效的方式解决了它：

$(menuHtml).kendoContextMenu({
    ...
    activate: function(e) {
        $('#nav').prepend($(e.item).parent());
    }
});

已更新 JSFiddle：http://jsfiddle.net/oqa4aa9m/22/

Parent 失去对 Kendo UI 上下文菜单的关注

Parent loses focus on Kendo UI Context Menu

css

contextmenu

sidebar

jquery-hover

kendo-ui