我正在使用Kendo Multiselect控件。我希望更改控件的Z-index。这是来自firebug窗口的渲染html标记。
<p>Bob's <dfn data-title="Dog">canine</dfn> mother and <dfn data-title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn data-title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>
Dom ready事件下的jquery代码是: -
<div class="k-animation-container" style="width: 383px; height: 124px; margin-left: -10px; padding-left: 10px; padding-right: 10px; padding-bottom: 15px; overflow: hidden; display: none; position: absolute; top: 237.4px; z-index: 10002; left: 275.4px; box-sizing: content-box;">
<div class="k-list-container k-popup k-group k-reset" id="selInvestors-list" data-role="popup" style="height: auto; display: none; font-size: 12px; font-family: Arial,Helvetica,sans-serif; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 15.2px; width: 377.2px; transform: translateY(-123px); position: absolute;">
<ul class="k-list k-reset" unselectable="on" style="overflow: auto; height: auto;" tabindex="-1" role="listbox" aria-hidden="true" id="selInvestors_listbox" aria-live="polite">
<li class="k-item" unselectable="on" data-idx="2" role="option" tabindex="-1">Client</li>
<li class="k-item" unselectable="on" data-idx="3" role="option" tabindex="-1">Employees</li>
<li class="k-item" unselectable="on" data-idx="4" role="option" tabindex="-1">Other</li>
</ul>
</div>
问题是每次下拉列表打开时都会返回z-index值“10002”。我想在每次下拉列表或下拉列表保持打开时将z-index设置为“90”。
请建议解决。
答案 0 :(得分:1)
问题是,第一次打开列表时,k-animation-container尚不存在,因此您无法设置z-index。在随后打开时,KendoUI框架始终将z-index重置为1002。
我想一个解决方法是你在一小段延迟之后设置z-index,所以你确定容器在那里并且KendoUI完成了z-index:
var selinvCtl = $("#select").data("kendoMultiSelect");
selinvCtl.bind("open", function (e) {
setTimeout(setZIndex90, 200, e);
});
function setZIndex90(event) {
event.sender.list.closest(".k-animation-container").css('z-index', '90');
}
在这个例子中,我引入了200毫秒的延迟。
<强> DEMO 强>