当我选择其中一个导航选项时,我正在创建一个带有 JQuery 事件状态边框底部的静态导航栏。
但是,我认为 Bootstrap 3 会导致事件状态出现奇怪的问题,因为每当我单击其中一个链接时,导航链接的间距就会变小,并且 li 会移到顶部。
有没有办法防止 Bootstrap 3 事件状态改变我的导航链接?
更新 我发现问题出在 JQUERY 主动选择器上 我仍在对其进行故障排除:https://jsfiddle.net/88z02dx6/
$('.vnavbar ul li a').click(function() {
$('active').removeClass();
$(this).addClass('active a');
});
奖励:出于某种原因,我无法使下拉菜单正常工作,我不希望它在悬停或处于事件状态时突出显示,我只希望它下拉一个下拉菜单当我点击它时列出。谢谢!
https://jsfiddle.net/DTcHh/23151/
CSS:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.bodyh {height:100%; background-color:blue;}
.tabs {
margin: 0;
padding: 0;
list-style: none;
display: table; /* [1] */
table-layout: fixed; /* [2] */
width: 100%; /* [3] */
}
.tabs__item {
display: table-cell; /* [4] */
}
.tabs__link {
display: block; /* [5] */
}
/**
* Primary nav. Extends `.tabs`.
*
* 1. Stop tabs’ corners leaking out beyond our 4px round.
*/
.primary-nav {
text-align: center; height:48px; position: relative;
overflow: hidden; background:#333 !important; border-radius: 0 !important; /* [1] */
}
.primary-nav a {
padding: 1em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.primary-nav a:hover {
background-color: #666;
}
.primary-nav a.active {
border-bottom: 4px solid #f90; color: #f90; padding:1em;
}
HTML
<li class="tabs__item">
<a href="#" class="tabs__link">Content</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Search</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Profile</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Voozlr</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Store</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Mail</a>
</li>
<li class="dropdown tabs__item">
<a href="#" class="dropdown-toggle tabs__link" dropdown-toggle="" data-toggle="dropdown">Me <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.navbar-collapse -->
</header>
<div class="bodyh"></div>
最佳答案
A. 看这里 jsfiddle
如果您将
border
添加到a.active
,您必须确保该border
的空间已经存在,或者你会有一些视觉问题。所以使用:border-bottom:4px solid transparent;
在单击之前,您在
a
上有一个类tabs__link
。对于那个类,您有display:block
的 css 样式。通过删除a
拥有的所有类,你失去了那种风格。所以您还需要将display:block
添加到a
。
所以最后你有这段代码
.primary-nav a {
padding: 1em;
color: #fff;
font-weight: bold;
text-decoration: none;
display:block;
border-bottom:4px solid transparent;
}
B. 或另一种方法(这里我还包括下拉菜单的解决方案)
看这里 jsfiddle
同时在
li.dropdown
内的a
上保留类dropdown-toggle
,并保留tabs__link
类,你应该使用这个(所以你不需要像以前的解决方案那样在a
上添加display:block
)$('li:not(.dropdown) a').attr('class', 'tabs__link'); $('li.dropdown a').attr('class', 'dropdown-toggle tabs__link');
要使
.dropdown-menu
正常工作,您首先需要从.primary-nav
中删除overflow:hidden
。然后你需要一点 JQ 来slideToggle()
.dropdown-menu
当你点击一个a.dropdown-toggle
if($(this).hasClass('dropdown-toggle')){ $(this).siblings(".dropdown-menu").slideToggle() }else{ $(".dropdown-menu").slideUp() }
所以。最后你有一个像这样的JQ
$('.vnavbar ul li a').click(function() {
$('li:not(.dropdown) a').attr('class', 'tabs__link');
$('li.dropdown a').attr('class', 'dropdown-toggle tabs__link');
$(this).addClass('active');
if($(this).hasClass('dropdown-toggle')){
$(this).siblings(".dropdown-menu").slideToggle()
}else{
$(".dropdown-menu").slideUp()
}
});
关于jquery - Bootstrap 3 事件状态导致导航栏上的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38701776/