Question

我在我的页面上悬停了侧边栏，其中包含使用搜索过滤器的链接。每个链接都有点击监听器，可以打开当前链接的某些操作的Kendo UI上下文菜单。当我打开Kendo Context Menu时，侧边栏悬停会丢失。如何在用户鼠标中心上下文菜单时保持侧边栏焦点？

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/

家长失去了对Kendo UI上下文菜单的关注

1 个答案: