Erlaube Klick auf Twitter Bootstrap Dropdown Link umschalten?

68

Wir haben das Twitter-Bootstrap-Dropdown so eingerichtet, dass es beim Hover funktioniert (im Gegensatz zum Klicken [Ja, wir kennen das No-Hover auf Touch-Geräten]). Wir möchten jedoch, dass der Hauptlink funktioniert, wenn wir darauf klicken.

Standardmäßig blockiert Twitter Bootstrap es. Wie können wir es also wieder aktivieren?

Hagelholz
quelle

Antworten:

122

Fügen Sie einfach deaktiviert als Klasse zu Ihrem Anker hinzu:

<a class="dropdown-toggle disabled" href="http://google.com">
    Dropdown <b class="caret"></b></a>

Also alles zusammen so etwas wie:

<ul class="nav">
    <li class="dropdown">
        <a class="dropdown-toggle disabled" href="http://google.com">
            Dropdown <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
</ul>
David Spence
quelle
22
Nun, der Hauptmenüpunkt wird auf diese Weise anklickbar, aber die Untermenüs fallen nicht herunter. Es stimmt, ich möchte, dass die Untermenüelemente durch Klicken auf das Caret angezeigt werden und nicht wie Hailwood mit dem Mauszeiger.
Attila Fulop
4
+1. Tolle Lösung, wurde in den Bootstrap-Dokumenten nicht angezeigt. Vielen Dank, dass Sie auf das Attribut disabled hingewiesen haben.
IntricatePixels
Dies funktioniert jetzt bei mir nicht, obwohl die Klasse hinzugefügt wurde: <nav class="nav-main mega-menu"> <ul id="topMain" class="nav nav-pills nav-main scroll-menu"> <li id="dropdown-menu-home"> <li id="about" class="dropdown active"> <a class="dropdown-toggle disabled" href="https://stackoverflow.com/about/"> <ul class="dropdown-menu"> </li> Sie bleibt inaktiv und kann nicht angeklickt werden. Ich verwende Bootstrap 3 und ein darauf basierendes Thema.
Soze
7
Hinzufügen das deaktiviert im <a> -Tag funktioniert das Dropdown nicht mehr? Gibt es eine Lösung dafür, dass beide funktionieren?
ParaMeterz
1
Um das Problem "No Hover On Touch" zu umgehen, habe ich modernizr verwendet, um dem HTML-Element eine Klasse von No-Touch hinzuzufügen. Dann habe ich Stile hinzugefügt, mit denen die Dropdowns beim Hover geöffnet werden konnten. Ich habe die deaktivierte Klasse über js nur Geräten hinzugefügt, die die No-Touch-Klasse von modernizr haben. Auf diese Weise funktionieren die Dropdowns für große Touch-Geräte, die tatsächlich das normale Navigationsgerät erhalten, wie vorgesehen. Bei Nicht-Touch-Geräten ersetzen die altmodischen Dropdown-Listen für Schwebeflug die klickende Lösung von Bootstrap. Scheint mir das Beste aus beiden Welten zu sein.
Codescribblr
11

Für diejenigen unter Ihnen, die sich über "Die Untermenüs fallen nicht herunter" beschweren, habe ich es so gelöst, was für mich sauber aussieht:

1) Neben deinem

<a class="dropdown-toggle disabled" href="http://google.com">
     Dropdown <b class="caret"></b>
</a>

ein neues setzen

<a class="dropdown-toggle"><b class="caret"></b></a>

und entfernen Sie das <b class="caret"></b>Tag, damit es so aussieht

<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>

2) Gestalte sie mit den folgenden CSS-Regeln:

.caret1 {
    position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
    padding-right: 40px;
}

Der Stil in der .caret1-Klasse dient dazu, ihn absolut in Ihrem zu positionieren li rechten Ecke .

Der zweite Stil dient zum Hinzufügen von Auffüllungen rechts neben dem Dropdown-Menü, um das Caret zu platzieren und zu verhindern, dass sich der Text des Menüelements überlappt.

Jetzt haben Sie einen ansprechenden Menüpunkt, der sowohl in Desktop- als auch in Mobilversionen gut aussieht und der sowohl anklickbar als auch dropdown-fähig ist, je nachdem, ob Sie auf den Text oder auf das Caret klicken.

Pere
quelle
Genau die Antwort, nach der ich gesucht habe. Es ist zwar ein bisschen hacken und manchmal stimmen die Dinge nicht perfekt überein - zum Beispiel habe ich beim Schweben eine Änderung der Farbe am unteren Rand des Randes, die entweder nur den Caret-Anker oder den Text-Anker gleichzeitig beeinflussen kann - aber Es ist ein tragfähiger Kompromiss.
Nikola Ivanov Nikolov
10

Da es keine wirklich funktionierende Antwort gibt (ausgewählte Antwort deaktiviert das Dropdown-Menü) oder die Verwendung von Javascript überschreibt, geht es weiter.

Dies ist alles HTML- und CSS-Fix (verwendet zwei <a>Tags):

<ul class="nav">
 <li class="dropdown dropdown-li">
    <a class="dropdown-link" href="http://google.com">Dropdown</a>
    <a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
 </li>
</ul>

Hier ist das CSS, das Sie benötigen.

.dropdown-li {
    display:inline-block !important;
}
.dropdown-link {
    display:inline-block !important; 
    padding-right:4px !important;
}
.dropdown-caret {
    display:inline-block !important; 
    padding-left:4px !important;
}

Angenommen, Sie möchten, dass beide <a>Tags beim Schweben eines der beiden Tags hervorgehoben werden, müssen Sie auch den Bootstrap überschreiben. Möglicherweise spielen Sie mit den folgenden Optionen herum:

.nav > li:hover {
    background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
    color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
    color: black; /*dropdown item text color*/
}
kingPuppy
quelle
nett! Fügen Sie auch .dropdown-caret {margin-left: -8px} hinzu, um das Caret auf den Button zu kleben.
Αλέκος
4

Ich bin mir nicht sicher, ob das Ankerelement der obersten Ebene ein anklickbarer Anker sein soll, aber hier ist die einfachste Lösung, um Desktop-Ansichten mit dem Hover-Effekt zu versehen, und mobile Ansichten behalten ihre Klickfähigkeit bei.

// Medium screens and up only
@media only screen and (min-width: $screen-md-min) {
    // Enable menu hover for bootstrap
    // dropdown menus
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

Auf diese Weise verhält sich das mobile Menü weiterhin so, wie es sollte, während das Desktop-Menü beim Hover anstatt bei einem Klick erweitert wird.

Ken Prince
quelle
Wie wird das schwebende Menü so lange angezeigt, bis ein Element aus der Liste angezeigt wird?
Rachel S
2

Eine alternative Lösung besteht darin, die Dropdown-Umschaltklasse aus dem Anker zu entfernen. Nach diesem Klick wird die Datei dropwon.js nicht mehr ausgelöst. Daher möchten Sie möglicherweise, dass das Untermenü beim Hover angezeigt wird.

Chuntao Lu
quelle
4
Aber es gibt keinen Schwebeflug oder "überhaupt nicht" auf Smartphones. Sie müssen irgendwie auf das Element klicken, damit es herunterfällt.
Pere
Nun, das Galaxy S3 kann einen schwebenden Finger erkennen. Aber die Welt ist noch nicht dazu bereit. :)
Josh M.
Für uns ist es nicht kritisch, dass Dropdown-Anzeigen auf Mobilgeräten angezeigt werden, damit diese Lösung funktioniert.
Sabrina Leggett
1

Sie könnten ein Javascript-Snippit verwenden

$(function()
{
    // Enable drop menu clicks
    $(".nav li > a").off();
});

Dadurch wird das Klickereignis aufgehoben und eine Änderung der URL verhindert.

Ian
quelle
0

Hier ist ein kleiner Hack, der je nach Bildschirmbreite von Daten-Hover zu Daten-Toggle gewechselt hat:

/**
 * Bootstrap nav menu hack
 */
$(window).on('load', function () {
    // On page load
    if ($(window).width() < 768) {
        $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
    }

    // On window resize
    $(window).resize(function () {
        if ($(window).width() < 768) {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
        } else {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
        }
    });
});
Allure Web Solutions
quelle
0

Dies kann einfacher erfolgen, indem zwei Links hinzugefügt werden, einer mit Text und href und einer mit Dropdown und Caret:

<a href="{{route('posts.index')}}">Posts</a>
<a href="{{route('posts.index')}}" class="dropdown-toggle" data-toggle="dropdown" role="link" aria-haspopup="true" aria- expanded="false"></a>
<ul class="dropdown-menu navbar-inverse bg-inverse">
    <li><a href="{{route('posts.create')}}">Create</a></li>
</ul>

Jetzt klicken Sie auf das Caret für Dropdown und den Link als Link. Kein CSS oder JS benötigt. Ich benutze Bootstrap 4 4.0.0-alpha.6 , das Caret zu definieren ist nicht notwendig, es erscheint ohne HTML.

Jorn
quelle