web-dev-qa-db-de.com

Bootstrap 3: Wie kann man den Dropdown-Link in der Navigationsleiste anklickbar machen?

Ich verwende die Standard-Navigationsleiste und einige Listenelemente sind Dropdown-Listen. Ich kann nicht auf den Link klicken, der das Dropdown auslöst. Ich weiß, dass ich einfach einen doppelten Link zum Dropdown hinzufügen könnte, aber ich möchte es lieber nicht. Kann man den Headlink zu einem anklickbaren Link machen (nicht nur ein Handle für das Dropdown-Menü)?

Siehe den ersten Link in der Dropdown-Liste. Ich möchte, dass Benutzer darauf klicken können und tatsächlich zu der Seite wechseln, auf die sie verweist.

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

Hierbei handelt es sich um den Code, der im Untermenü von hover angezeigt wird, und Sie können auf eine Seite umleiten, wenn Sie darauf klicken.

How:class="dropdown-toggle" data-toggle="dropdown" aus einem Tag entfernen und css hinzufügen.

Hier ist die Demo unter jsfiddle . Für Demo passen Sie bitte den Splitter von jsfiddle an, um das Dropdown aufgrund von Bootstrap-CSS anzuzeigen. Jsfiddle lässt Sie nicht auf eine neue Seite umleiten.

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

Fügen Sie einfach die Klasse disabled auf Ihrem Anker hinzu:

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

Und du kannst gehen.

51
Dawid Winiarz

Hier ist ein kleiner Hack, der auf Bootstrap 3.3 basiert und etwas jQuery verwendet.

Ein Klick auf ein geöffnetes Dropdown-Menü führt den Link aus.

$('li.dropdown').on('click', function() {
    var $el = $(this);
    if ($el.hasClass('open')) {
        var $a = $el.children('a.dropdown-toggle');
        if ($a.length && $a.attr('href')) {
            location.href = $a.attr('href');
        }
    }
});
17
garfyld

1: Dropdown-Trigger entfernen: 

data-toggle="dropdown"

2: fügen Sie diese Ihre CSS hinzu

.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    margin-top: 0px;
}

für die Leute gepostet, wie darauf gestoßen wurde

12
user3314900

Ich weiß, dass dies ein bisschen alt ist, aber ich bin kürzlich auf die Suche nach einer ähnlichen Lösung gestoßen. Sich auf Hover-Events zu verlassen, ist nicht gut für responsives Design und besonders für mobile/Touchscreens schlecht. Am Ende habe ich eine kleine Bearbeitung der Datei dropdown.js vorgenommen, mit der Sie auf das Menüelement klicken können, um das Menü zu öffnen. Wenn Sie erneut auf das Menüelement klicken, wird es dem folgen.

Das Schöne daran ist, dass es überhaupt nicht auf Schwebeflug angewiesen ist und es daher auf einem Touchscreen immer noch sehr gut funktioniert.

Ich habe es hier gepostet: https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

Hoffentlich hilft das!

11
Matthew Hanlon

Der Zusatz CSS/JS ist nicht erforderlich. (Getestet)

  1. data-toggle="dropdown" - für Clickable (kann auch Mobile als Web verwenden)
  2. data-hover="dropdown" - für Hover (nur Web. Cz mobile verfügt nicht über die Funktion HOVER)

Funktioniert auch auf Mobile gut :)


Codebeispiel für anklickbare (data-toggle="dropdown")

/*!
 * this CSS code just  for snippet preview purpose. Please omit when using  it. 
 */

#bs-example-navbar-collapse-1 ul li {
  float: left;
}

#bs-example-navbar-collapse-1 ul li ul li {
  float: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li>
      <a class="" href="">Home</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                subnav1
            </a>
      <ul class="dropdown-menu">
        <li><a href="">Sub1</a></li>
        <li><a href="">Sub2</a></li>
        <li><a href="">Sub3</a></li>
        <li><a href="">Sub4</a></li>
        <li><a href="">Sub5</a></li>
        <li><a href="">Sub6</a></li>
      </ul>
      <div class="clear"></div>
    </li>
    <li class="dropdown">
      <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
            subnav2
            </a>
      <ul class="dropdown-menu">
        <li><a href="">Sub1</a></li>
        <li><a href="">Sub2</a></li>
        <li><a href="">Sub3</a></li>
        <li><a href="">Sub4</a></li>
        <li><a href="">Sub5</a></li>
        <li><a href="">Sub6</a></li>
      </ul>
      <div class="clear"></div>
    </li>
  </ul>
</div>

<br>
<br>
<p><b>Please Note:</b> added css code not related to Bootstrap navigation. It's just for snippet preview purpose </p>

Ausgabe

 output  enter image description here

5
Abdulla Nilam

Hier ist meine Lösung, die JQuery in Ihrem Header verwendet und auf Mobile arbeitet.

Auf dem Handy benötigen die Top-Links zwei Taps: Ein Dropdown-Menü und ein Link zum Link.

$(function(){
  $('.dropdown-toggle').click(
    function(){
      if ($(this).next().is(':visible')) {
        location.href = $(this).attr('href');;
      }
     });
  });
});

4
Enjabain

Fügen Sie disabled Class in Ihrem Anker hinzu.

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

Dies ist jedoch nicht für Mobilgeräte geeignet, daher müssen Sie disabled class für Mobilgeräte entfernen. Der aktualisierte js-Code wird daher wie folgt angezeigt:

$('.navbar .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
  else { $(this).removeClass('disabled'); }
});
3

Jeder, der hier ankommt, möchte die schnelle Antwort auf dieses Problem. Ersetzen Sie die Funktion "Dropdown.prototype.toggle" in Ihrer bootstrap.js (oder dropdown.js) durch Folgendes:

  Dropdown.prototype.toggle = function (e) {
var $this = $(this)

if ($this.is('.disabled, :disabled')) return

var $parent  = getParent($this)
var isActive = $parent.hasClass('open')

clearMenus()

if (!isActive) {
    if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
    }

    var relatedTarget = { relatedTarget: this }
    $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

    if (e.isDefaultPrevented()) return

    $parent
      .toggleClass('open')
      .trigger('shown.bs.dropdown', relatedTarget)

    $this.focus()
}
else
{
    var href = $this.attr("href").trim();

    if (href != undefined && href != " javascript:;")
        window.location.href = href;
}

return false
  }

Beim zweiten Klick (dh wenn der Menüpunkt die Klasse "open" hat), wird zuerst geprüft, ob die href nicht definiert ist oder auf "javascript :;" bevor du dich auf den fröhlichen Weg schickst.

Genießen!

1
pimbrouwers

Dadurch wird der Link im übergeordneten Menü der Dropdown-Liste aktiviert, wenn er geöffnet wird, und er wird deaktiviert, wenn er geschlossen wird. Der einzige Nachteil ist, dass er anscheinend zweimal außerhalb der Dropdown-Liste "tippen" muss, um ihn in mobilen Geräten zu schließen.

$(document).on("page:load", function(){
    $('body').on('show.bs.dropdown', function (e) {
        $(e.relatedTarget).addClass('disabled')
    });
    $('body').on('hide.bs.dropdown', function (e) {
        $(e.relatedTarget).removeClass('disabled')
    });
});

Hinweis Dies setzt die Standardmarkierung und Turbolinks (Rails) voraus. Sie können es mit $ (document) .ready (...) versuchen

1
hisa_py

Die meisten der oben genannten Lösungen sind nicht mobilfreundlich.

Die Lösung, die ich vorschlage, stellt fest, ob das Gerät nicht berührt wird und dass der navbar-toggle (Hamburgermenü) nicht sichtbar ist, und lässt den übergeordneten Menüpunkt aufklappendes Untermenü bei hover und und seinem Link bei Klick

Macht auch den Rand 0, da die Lücke zwischen der Navigationsleiste und dem Menü in einigen Browsern nicht zu den Unterelementen führt

$(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
GiorgosK

ich weiß, es ist zu spät, aber jeder, der hierhergekommen ist, um Hilfe zu erhalten, kann diesen Beitrag sehen. Es gibt zwei Optionen, entweder css/JavaScript Arbeit perfekt sein f

Siehe hier zum Artikel 

0
Sikander

Alternativ ist hier eine einfache jQuery-Lösung:

$('#menu-main > li > .dropdown-toggle').click(function () {
    window.location = $(this).attr('href');
});

Das hat in meinem Fall funktioniert:

$('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
Ilán Vivanco