Question

我正在尝试为我的Kendo Multiselect添加更多功能，以便像普通下拉列表一样运行。我希望它有一个箭头或三角形图标，并在点击该图标时切换并关闭。我怎样才能做到这一点？

Answer 1

对于“剑道多选箭头”，谷歌的这个问题相当高。这是我正在使用的更完整的解决方案。（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()。

Here's a fiddle证明它有效。到目前为止我发现的唯一问题是，当你从多选中删除一个项目时，它会导致列表项被关闭。

直到kendo add this as a feature，我认为这是我们能做的最好的事情！

编辑 - 对不起，不是Angular - 仍然是HTH。

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

1 个答案: