it-swarm.com.de

Wie man ein Bootstrap 3 Dropdown-Menü standardmäßig öffnet, wenn es sich in einer ausgeblendeten Navigationsleiste befindet

Ich versuche, mein Dropdown-Menü standardmäßig zu öffnen, wenn meine ausgeblendete Navigationsleiste geöffnet wird. Hier ist eine Geige um meinen Code bis jetzt anzuzeigen

Derzeit werden zwei Links und ein Dropdown-Menü angezeigt, wenn Sie im ausgeblendeten Zustand auf die Navigationsleiste klicken. Sie müssen erneut klicken, um das Dropdown-Menü zu öffnen. 

Mein Ziel ist es, das Dropdown-Menü standardmäßig zu öffnen und das a.dropdown-toggle-Element auszublenden, wenn die ausgeblendete Navbar geöffnet wird. Ein Bild davon, wie es aussehen soll, wenn die eingeblendete Navbar geöffnet wird:

  • Verknüpfung
  • Verknüpfung
  • Dropdown-Liste
  • Aktion
  • Noch eine Aktion
  • Noch etwas hier
  • Getrennter Link
  • Noch ein getrennter Link

Mein erster Gedanke war, display: none für a.dropdown-toggle zu verwenden, aber das blendet nur das gesamte Dropdown-Menü aus. Ich hoffe, dass jemand etwas vorschlagen kann. Ich bin offen für jQuery- und CSS-Lösungen.

Meine Auszeichnung:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </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">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
16
henrywright

Sie können einen CSS-Stil für die responsive mobile Anzeige hinzufügen Fügen Sie ihn in Ihre CSS-Datei ein:

@media only screen and (max-width:480px){
    .dropdown-menu{
        display: block;
        position: static;
        background-color:transparent;
        border:0 none;
        box-shadow:none;
        margin-top:0;
        position:static;
        width:100%;
    }
    .navbar-nav .dropdown-menu > li > a, 
    .navbar-nav .dropdown-menu .dropdown-header {
        padding:5px 15px 5px 25px;
    }
    .navbar-nav .dropdown-menu > li > a{
        line-height:20px;
    }
    .navbar-default .navbar-nav .dropdown-menu > li > a{    
        color:#777;
    }
}

sie können es in seiner Gesamtheit hier sehen: Demo jsfiddle

hoffentlich hilft das.

20
Tarjo

Entsprechend den Dokumenten für Bootstrap v3 können Sie Javascript verwenden, um die Kollapsereignisse einzuhängen:

$(function () {
  $('#bs-example-navbar-collapse-1').on('shown.bs.collapse', function(e) {
    $('#my_dropdown').dropdown('toggle', 'open').hide();
    console.log('shown:', e);
  });
});

Ich bin mir nicht sicher, ob das Ergebnis das ist, was Sie wollen, denn während die Schaltfläche "Toggle" ausgeblendet ist, ist das Untermenü immer noch eingerückt. Anstatt zu versuchen, Bootstrap so stark zu biegen, ist es vielleicht eine bessere Lösung, zwei Menüs mit der gewünschten Struktur für jede Bildschirmgröße zu haben und eines oder das andere basierend auf Medienabfragen anzuzeigen.

Geige: http://jsfiddle.net/scardine/tw82o88y/

3
Paulo Scardine

Sie können Ihrem Code eine Javascript-Funktion hinzufügen:

<script>
	$(document).ready(function(){
		$(".dropdown").hover(            
		function() {
			$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
			$(this).toggleClass('open');        
		},
		function() {
			$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
			$(this).toggleClass('open');       
		}
		);
	});
</script>

das Beispiel und die Demo finden Sie in dtc-eng

0
Android Maker