发表新帖
发表新帖

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

前端 未结
关注
15 792
暗喜
暗喜 2020-12-07 09:23

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 duplic

相关标签:
15条回答
  • 挽巷
    2020-12-07 10:02

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

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

    Here is the demo at jsfiddle. For demo, please adjust jsfiddle's splitter to see the dropdown due to Bootstrap CSS. jsfiddle won't let you redirect to a new page.

    <!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>
    0 讨论(0)
  • 梦如初夏
    2020-12-07 10:03

    This worked in my case:

    $('a[data-toggle="dropdown"]').on('click', function() {

    var $el = $(this);

    if ( $el.is(':hover') ) {

        if ( $el.length && $el.attr('href') ) {
            location.href =$el.attr('href');
        }

    }

});
    0 讨论(0)
  • 粉色の甜心
    2020-12-07 10:04

    i know its too late but anyone who came here for help now you can see this post .There are two options either use css/ JavaScript and if you use css it will be applicable to devices greater that 769px width for clickable top menu, that will be work perfectly f

    See here for article

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-07 10:06

    Add disabled Class in your anchor, following are js:

    $('.navbar .dropdown-toggle').hover(function() {
  $(this).addClass('disabled');
});

    But this is not mobile friendly so you need to remove disabled class for mobile, so updated js code is following:

    $('.navbar .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
  else { $(this).removeClass('disabled'); }
});
    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-07 10:17

    Most of the above solutions are not mobile friendly.

    The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click

    Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems

    $(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

    $(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

    0 讨论(0)
  • 抹茶落季
    2020-12-07 10:19

    Just add the class disabled on your anchor:

    <a class="dropdown-toggle disabled" href="{your link}">
Dropdown</a>

    And you are free to go.

    0 讨论(0)
 看不清?
提交回复
热议问题