jquery - 悬停时重新定位元素，最终在 Bootstrap 下很好地结束

Question

我有这个 Bootstrap 3 导航栏下拉菜单项:

<li class="dropdown">
    <a data-toggle="dropdown"><i class='far fa-calendar-alt fa-fw sidebarIcon'></i>Planning <b class="caret"></b></a>
    <ul class="dropdown-menu level1">
        <li><a href="../gus/indexBacklog.php"><i class='fas fa-history fa-fw sidebarIcon'></i>Backlogs</a></li>
        <li><a href="../gus/"><i class='far fa-clock fa-fw sidebarIcon'></i>Schedules</a></li>
        <li><a href="../tasks/"><i class='far fa-check-square fa-fw sidebarIcon'></i>Tasks</a></li>
    </ul>
</li>

我希望它在您将鼠标悬停在其上时自动展开并向右移动。到目前为止，我已经使用了这段 jQuery 代码:

$('ul.nav li.dropdown').hover(function() {
    $(this).find('.level1').parent().css({position: 'relative'});
    $(this).find('.level1').css({top: 0, left: 100, position:'absolute', zIndex: 1000});
    $(this).find('.level1').stop(true, true).delay(100).fadeIn(200);
}, function() {
    $(this).find('.level1').stop(true, true).delay(100).fadeOut(200);
});

但问题是，它最终会在下一栏的 Bootstrap 下完结。设置为 1000 的 zIndex 似乎对它没有任何影响。关于如何将它放在井上有什么建议吗？

Answer 1

尝试将 !important 添加到您的 z-index。

$(this).find('.level1').style('zIndex', 1000, 'important');