Erlaube Klick auf Twitter Bootstrap Dropdown Link umschalten?

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?

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>

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.

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*/
}

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.

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.

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.

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');
        }
    });
});

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.