bootstrap顶级菜单项不要点击链接

时间:2014-07-21 14:45:02

标签: twitter-bootstrap menu

在此页面上:franklincc.info/migrate包含子菜单项的顶级菜单项目不会转到他们点击时应该去的页面。但是,如果右键单击项目,例如“关于商会”,然后单击“在另一个选项卡中加载”,则链接将起作用。子菜单项工作正常。主页链接工作正常。

谢谢,

标记

2 个答案:

答案 0 :(得分:1)

在我的测试中,在Firefox 30中为Ubuntu工作正常..也许你修复了 但你必须检查

li元素在悬停时不会获得开放类。只需点击“关于商会”。

答案 1 :(得分:0)

坦率地说,他们不应该这样做。这是一个众所周知的“问题”。很多人抱怨它,但这确实是默认行为。它应该是触发下拉列表的动作。

这可能会对您有所帮助:http://wpeden.com/tipsntuts/twitter-bootstrap-dropdown-on-hover-and-activating-click-event-on-parent-item/(也请查看评论)

<script>
jQuery(function($) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

});

$('.navbar .dropdown > a').click(function(){
location.href = this.href;
});

});
</script>

或者,如果您为移动视图使用不同的代码,则可以删除data-toggle="dropdown"实例并包含CSS代码以使子导航显示在悬停状态而不是单击以允许父级可单击。 (见http://brianjosephstudios.com/php-tutorials/web-design-tip-how-to-make-the-parent-link-item-clickable-in-twitter-bootstrap/)寻求解决方案。

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;
    margin: 0
}

a.menu:after, .dropdown-toggle:after {
  content: none;
}