1

我正在使用 Kendo UI 菜单小部件，并且只想在选择最后一个子菜单项时触发 onSelect 事件：

例如，假设我选择下面的“业务组”菜单项。然后我想触发其他功能。但是，如果我点击“报告”，我不想做任何事情。

这可能很容易，比如检查最后一个孩子，但我仍在努力解决这个问题。

这是带有“kendo-menu”小部件的 HTML 代码：

<div class="widget-content text-left text-info" style="float:left; border:none;">
    <div class="widget-content" text-left text-info style="float:left; border:none; width:100px;">
        <span>
            <ul kendo-menu style="display: inline-block"  k-orientation="vm.menuOrientation"
            k-rebind="vm.menuOrientation" k-on-select="vm.onSelect(kendoEvent)" k-closeOnClick="false">
                <li>
                Reports
                    <ul>
                        <li>VaR
                            <ul>
                                <li>Business Group</li>
                                <li>Stress Scenarios</li>
                                <li>IR Risk - PV10</li>
                            </ul>
                        </li>
                        <li>Ctrpty
                            <ul>
                                <li>
                                    <a href="../index.html#/dashboard">Industry</a>
                                </li>
                                <li>
                                    <a href="index.html#/dashboard?repttype='MTM'">MTM</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </span>
    </div>

在我的 javascript 控制器代码中，我连接了事件：

vm.onSelect = function (ev) {          
      changeReportType(ev);
    };

但是，每次我单击任何菜单项时都会触发。我只想对最底部的项目做出反应。

4

3 回答 3

1

我认为您可以简单地搜索ul后代：

vm.onSelect = function (e) {          
    var isLeaf = $(e.item).find("ul").length === 0;

    if (isLeaf) changeReportType(ev);
};

（演示）

于 2014-06-26T00:18:35.070 回答
0

我最终使用了 .className.match() 效果很好：

function swapGrid(e) {                    
        if (!e.item.className.match("selectable")) {
            // we have not yet reached the last child (i.e. the one with the "selectable" class).
            return;
        }
        var reptType = e.item.firstChild.textContent;    
}
于 2014-07-02T23:20:12.417 回答
-1

我不知道您是如何生成标记的，但您可以为那些可以单击的标记添加类选择器。

JavaScript：

vm.onSelect = function (ev) {          
  var item = $(ev);
  if ( item.hasClass("selectable") ) {
      changeReportType(ev);
  } else {
      ev.preventDefault();
  }
};

标记：

<li class="selectable">Business Group</li>
于 2014-06-25T12:37:46.860 回答