我有可在悬停时使用的 Bootstrap 水平菜单。是否可以添加淡入淡出效果?我尝试使用 fadeIn()
和 fadeOut()
,但它出现了菜单。
示例如下:Bootply
最佳答案
我认为如果您在顶部菜单中使用选项卡,它会与 Bootstrap 更加一致:
<div class="container">
<div class="row">
<ul class="nav nav-tabs pull-right" id="myTab" role="tablist">
<li class="active"><a href="#one" role="tab" data-toggle="tab">One</a></li>
<li><a href="#two" role="tab" data-toggle="tab">Two</a></li>
<li><a href="#three" role="tab" data-toggle="tab">Three</a></li>
</ul>
</div>
<div class="row">
<div class="tab-content">
<div class="tab-pane fade in active pull-right" id="one">
<nav class="navbar navbar-default pull-right submenu" role="navigation">
<ul class="nav navbar-nav in" id="one-nav">
<li><a href="#" id="">One sub 1</a></li>
<li><a href="#" id="">One sub 2</a></li>
<li><a href="#" id="">One sub 3</a></li>
<li><a href="#" id="">One sub 4</a></li>
</ul>
</nav>
</div>
<div class="tab-pane fade pull-right" id="two">
<nav class="navbar navbar-default pull-right submenu" role="navigation">
<ul class="nav navbar-nav in" id="two-nav">
<li><a href="#" id="">Two sub 1</a></li>
<li><a href="#" id="">Two sub 2</a></li>
</ul>
</nav>
</div>
<div class="tab-pane fade pull-right" id="three">
<nav class="navbar navbar-default pull-right submenu" role="navigation">
<ul class="nav navbar-nav in" id="three-nav">
<li><a href="#" id="">Three sub 1</a></li>
<li><a href="#" id="">Three sub 2</a></li>
<li><a href="#" id="">Three sub 3</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
然后只需点击鼠标悬停即可:
$('a','.nav-tabs > li').hover(function(){
$(this).trigger('click');
});
// The following addresses the problem listed in the comment below
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.tab-pane').not($(this).attr('href')).removeClass('active');
});
请参阅bootply here .
关于javascript - Bootstrap 水平菜单,悬停时具有淡入淡出效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24732381/