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

Question

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

例如，假设我选择了下面的“业务组”菜单项。然后，我想要触发其他函数。但是，如果我点击"Report“，我什么也不想做。

这可能是一些简单的事情，比如检查最后一个孩子，但我仍然在努力弄清楚。

下面是带有"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);
    };

但是，每当我单击任何菜单项时，它都会触发。我只想在最底层的项目上做出反应。

Answer 1

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

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

    if (isLeaf) changeReportType(ev);
};

(demo)

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

Answer 3

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

JavaScript：

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

标记：

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