剑道菜单onSelect，如何确定最后一个孩子答案

【问题标题】：Kendo menu onSelect, how to determine the last child剑道菜单onSelect，如何确定最后一个孩子
【发布时间】：2014-06-24 22:39:59
【问题描述】：

我正在使用 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);
    };

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

【问题讨论】：

标签： jquery kendo-ui kendo-menu

【解决方案1】：

我觉得你可以直接搜索uldescendants：

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

    if (isLeaf) changeReportType(ev);
};

(demo)

【讨论】：

【解决方案2】：

我最终使用了 .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;    
}

【讨论】：

【解决方案3】：

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

JavaScript：

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

标记：

<li class="selectable">Business Group</li>

【讨论】：

太好了，我今天早上试试。我最终使用了 {if (e.item.firstChild.text == e.item.firstChild.text)}，在这种情况下，这意味着我已经到了谷底。但我的代码似乎不是一个干净的解决方案。
由于某种原因 item.hasClass("selectable") 总是评估为 FALSE。