Question

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

例如，我们选择＆＃34; Business Group＆＃34;菜单项如下。然后我想触发其他功能。但是，如果我点击＆＃34;报告＆＃34;我不想做任何事情。

这对于检查最后一个孩子来说可能很容易，但我仍然试图解决这个问题。

这里是＆＃34; kendo-menu＆＃34;的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>

选择Kendo菜单，如何确定最后一个孩子

3 个答案: