我有这个代码:https://jsfiddle.net/ks10hwj4/。它由一个列表组成
<ul class="files-list list-group items-list ui-selectable" style="min-height:200px;">
每个元素都像
<li class="file-item0 list-group-item list-group-item-action ui-widget-content ui-selectee ui-selected">
<div class="row ui-selectee active ui-selected">
<div class="col-12 col-lg-9 vertical-align ui-selectee active ui-selected">
a folder
</div>
</div>
然后我调用可选函数,告诉它在选择时修改引导的活动类
$('.files-list').selectable({
cancel: ".ui-splitselect-item .ui-splitselect-handle-drag",
selecting: function (event, ui) {
$(ui.selecting).addClass('active');
},
unselecting: function (event, ui) {
$(ui.unselecting).removeClass('active');
},
selected: function (event, ui) {
$(ui.selected).addClass('active');
},
unselected: function (event, ui) {
$(ui.unselected).removeClass('active');
}
});
它运行良好,但当我选择文件时它没有显示该框。我的意思是,我看不到鼠标在单击和移动时生成的框。可能是什么问题?
你似乎缺少jQuery-ui css文件。尝试添加下面的 css。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
更新:
更改所选框的颜色可以通过在您自己的 css 文件中添加一些 css 来完成。"!important"覆盖了jQuery-ui.css中的原始颜色。
.ui-selected {
background: #00b448 !important;
}