Jquery 多级下拉插件

Question

我正在使用 Jquery 插件向用户显示分层列表。然后用户可以选择父母或孩子。我做了一个小提琴，你可以在这里看到http://jsfiddle.net/wujz8jqj/。

问题是我可以选择孩子但不能选择父母。所以如果一个元素有孩子，我只能选择孩子。换句话说，如果我们在树上下文中交谈，我只能选择叶子项。

我使用的插件就是这个，http://www.jqueryscript.net/menu/Animated-Multi-level-jQuery-Dropdown-Plugin.html。

小提琴中的结构是这样的

item 1
item 2
   item 2.1
   item 2.2
...

所以这里的问题是我无法选择第 2 项。有什么想法吗？我正在考虑添加一个图标，因此如果用户选择该图标，该项目就会被选中。

Answer 1

我建议kendo ui 看下面的sn-p。

var dropdown = $("#dropdown").kendoDropDownList({
    dataSource: [{
        text: "",
        value: ""
    }],
    dataTextField: "text",
    dataValueField: "value",
    open: function (e) {
        // If the treeview is not visible, then make it visible.
        if (!$treeviewRootElem.hasClass("k-custom-visible")) {
            $treeviewRootElem.slideToggle('fast', function () {
                dropdown.close();
                $treeviewRootElem.addClass("k-custom-visible");
            });
        }
    }
}).data("kendoDropDownList");
var $dropdownRootElem = $(dropdown.element).closest("span.k-dropdown");

var treeview = $("#treeview").kendoTreeView({
    select: function (e) {
        // When a node is selected, display the text for the node in the dropdown and hide the treeview.
        $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());
        $treeviewRootElem.slideToggle('fast', function () {
            $treeviewRootElem.removeClass("k-custom-visible");
        });
    }
}).data("kendoTreeView");
var $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

// Hide the treeview.
$treeviewRootElem.width($dropdownRootElem.width())
    .css({
    "border": "1px solid grey",
        "display": "none",
        "position": "absolute"
});

// Position the treeview so that it is below the dropdown.
$treeviewRootElem.css({
    "top": $dropdownRootElem.position().top + $dropdownRootElem.height(),
        "left": $dropdownRootElem.position().left
});

$(document).click(function (e) {
    // Ignore clicks on the treetriew.
    if ($(e.target).closest("div.k-treeview").length == 0) {
        // If visible, then close the treeview.
        if ($treeviewRootElem.hasClass("k-custom-visible")) {
            $treeviewRootElem.slideToggle('fast', function () {
                $treeviewRootElem.removeClass("k-custom-visible");
            });
        }
    }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<script type="text/javascript" src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<ul id="treeview">
  <li data-expanded="true">Item 1
    <ul>
      <li>Item 1.1</li>
      <li>Item 1.2</li>
    </ul>
  </li>
  <li data-expanded="true">Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
</ul>
<input id="dropdown"></input>

演示：http://jsfiddle.net/kishoresahas/qx919w6o