我在 Bootstrap 中创建了一些选项卡,我希望在鼠标悬停时显示这些选项卡
这是选项卡https://jsfiddle.net/uzfxmrs3/
这是html
<div class="d-flex align-items-start responsive-tab-menu">
<ul class="nav flex-column nav-pills nav-tabs-dropdown me-3" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
<li class="nav-item">
<a class="nav-link text-start active" href="#" id="v-pills-home-tab" data-bs-toggle="pill"
data-bs-target="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-start" href="#" id="v-pills-profile-tab" data-bs-toggle="pill"
data-bs-target="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
aria-selected="false">Profile</a>
</li>
</ul>
<div class="tab-content responsive-tab-content" id="v-pills-tabContent" style="border:1px solid #708090; width:600px;height:200px;">
<div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"
tabindex="0">home content</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"
tabindex="0">profile content</div>
</div>
</div>
这是jquery
$('.nav-tabs-dropdown')
.on("mouseover", ".nav-link:not('.active')", function (event) {
$(this).closest('ul').removeClass("open");
})
.on("mouseover", ".nav-link.active", function (event) {
$(this).closest('ul').toggleClass("open");
});
当前代码仅在单击时显示内容。
2条答案
按热度按时间kxxlusnw1#
您可以将jquery更改为如下形式:
mm9b1k5b2#
我做了垂直菜单,只显示悬停/鼠标悬停像这样
https://jsfiddle.net/8jn240b5/