javascript - Bootstrap 3 : how to make head of dropdown link clickable in navbar

标签 javascript css twitter-bootstrap-3

我使用的是默认导航栏,其中几个列表项是下拉菜单。我无法单击触发下拉菜单的链接。我知道我可以在下拉列表中添加一个重复的链接,但我不想这样做。是否有可能使头部链接成为可点击的链接(而不仅仅是下拉菜单的句柄)?

作为引用,请参阅下方下拉列表中的第一个链接。我希望用户能够单击它并实际转到它指向的页面。

<nav class="navbar navbar-fixed-top admin-menu" role="navigation">
  <div class="navbar-header">...</div>
   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav navbar-right">
       <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           I DONT WORK! <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
           <li><a href="/page2">Page2</a></li>
         </ul>
       </li>
       <li><a href="#">I DO WORK</a></li>
     </ul>               
   </div><!-- /.navbar-collapse -->
 </nav>

最佳答案

这是在鼠标悬停时滑下子菜单的代码,如果您点击它,您可以重定向到一个页面。

方法:从标签中删除 class="dropdown-toggle"data-toggle="dropdown",并添加 css。

这是jsfiddle 的演示. 对于演示,请调整 jsfiddle 的拆分器以查看由于 Bootstrap CSS 而产生的下拉列表。 jsfiddle 不会让您重定向到新页面

enter image description here

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <style type='text/css'>
        ul.nav li.dropdown:hover ul.dropdown-menu {
            display: block;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-fixed-top admin-menu" role="navigation">
        <div class="navbar-header">...</div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown"><a href="http://stackoverflow.com/">Stack Overflow <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="/page2">Page2</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">I DO WORK</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </nav>
</body>
</html>

关于javascript - Bootstrap 3 : how to make head of dropdown link clickable in navbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19935480/

相关文章:

node.js - 无法使用 Grunt 编译 Bootstrap 3 LESS 主文件 (bootstrap.less)?

javascript - Jquery - 如何替换 div 中的一个单词?

javascript - 如何使用SAP Leonardo的API翻译?

javascript - Bootstrap 3 表单控制类问题?

javascript - 单击超链接后在同一页面显示对象

css - 水平溢出必须从右侧元素开始 AMP 仅 CSS

CSS文件类格式混淆

javascript - 使用 Jquery 检测文本字段中的第一个字符

javascript - WordPress 主题在 Chrome 中显示不正确

css - 为什么将鼠标悬停在绝对/相对 div 上时菜单会变得透明?