Bootstrap 3:如何在导航栏中使下拉链接的头部可点击 [英] Bootstrap 3: how to make head of dropdown link clickable in navbar

查看:21
本文介绍了Bootstrap 3:如何在导航栏中使下拉链接的头部可点击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm using the default navbar and a couple of the list items are dropdowns. I'm not able to click the link that triggers the dropdown. I know that I could just add a duplicate link into the dropdown but I'd rather not. Is it possible to make the head link a clickable link (not just a handle for the dropdown)?

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

For reference, see the first link in the dropdown below. I want users to be able to click it and actually go to the page it points to.

<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>

推荐答案

这里是在悬停时向下滑动子菜单的代码,如果你点击它,让你重定向到一个页面.

Here this the code which slides down the sub menu on hover, and let you redirect to a page if you click on it.

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

How: strip out class="dropdown-toggle" data-toggle="dropdown" from a tag, and add css.

这是

<!--/.navbar-collapse --></nav>

<!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>

这篇关于Bootstrap 3:如何在导航栏中使下拉链接的头部可点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆