Kendo Multiselect要使箭头图标和行为在单击时关闭

Question

我正在尝试向Kendo Multiselect添加更多功能，以使其表现得像普通的下拉列表。我希望它具有箭头或三角形图标，并在单击该图标时切换并关闭。我该如何实现？

Answer 1

对于“ kendo multiselect arrow”，这个问题在Google上引起了很高的关注。这是我正在使用的更完整的解决方案。（用回答的CSS Manuel很好-实际上来自我在Telerik论坛上的帖子！）。

CSS添加一个下拉箭头：

.k-multiselect:after {
content: "\25BC";
position: absolute;
top: 30%;
right: 25px;
font-size: 12px;
}

打开时使其侧面指向箭头的技巧：

的CSS

.k-multiselect.opened:after {
content: "\25C0";
}

JS

var Globals = {};

$('#foo').kendoMultiSelect({
    ...
    open: function(){
       $(this.element).parent().addClass('opened'); // ? becomes ?
       Globals.MultiSelectIsOpening = true;
       setTimeout(function(){
           Globals.MultiSelectIsOpening = false;
       }, 100);
    },
    close: function(){
        $(this.element).parent().removeClass('opened');
    }
    ...
});

$('#foo_container').on('click', '.k-multiselect', function () {
    if (!Globals.MultiSelectIsOpening) {
        $('#foo').data('kendoMultiSelect').toggle();
    }
});

#foo_container例如，可以动态地计算出需要- $('#foo').parents('.k-multiselect').parent()。

这是一个小提琴，证明它可以正常工作。到目前为止，我发现的唯一问题是，当您从多选中删除一个项目时，它将导致列表项被关闭。

在kendo将此功能添加为功能之前，我认为这是我们能做到的最好的方法！

编辑-对不起，不是Angular-尽管如此。