Versuchen, MacOS Dropdown-Verhalten zu emulieren

Question

Ich versuche, das Verhalten der Dropdown-Menüs in MacOS mit Bootstrap und jQuery neu zu erstellen. Gewünschtes Verhalten ist "Zeigen/Verbergen" bei Klick, aber auch "Schweben" beim Bewegen zwischen den Dropdown-Menüs, bis erneut auf "Klicken" geklickt wird.

Ich habe bereits die meisten der gewünschten Verhalten mit einigen hastig geschrieben jQuery erreicht:

$(document).ready(function() { 
    $(".dropdown").on("click", function(event){ 
     $('.dropdown').addClass('show-on-hover'); 
    }); 

    $('.nav').on('mouseenter', 'li.show-on-hover', function() { 
     $('.dropdown.open').removeClass('open'); 
     $(this).addClass('open'); 
    }); 

    $('.nav').on('click', 'li.show-on-hover.open', function() { 
     $('.dropdown').removeClass('show-on-hover'); 
    }); 
}); 

aber ich ein Problem habe, wo, wenn ich außerhalb der Drop-Down klicken, die anderen noch auf schweben aktivieren (die shouldn Es passiert nicht, sie sollten sich erst wieder öffnen, wenn Sie an diesem Punkt klicken. Irgendwelche Vorschläge, wie man dieses Problem beheben kann, und/oder Vorschläge für bessere Lösungen für diese Art von Dropdown-Verhalten würden sehr geschätzt werden!

Zum Beispiel, wenn dieses Verhalten nur mit CSS erreicht werden kann, wäre das erstaunlich!

https://codepen.io/jakatz/pen/NjMgRg

Answer 1

Die Logik ist eigentlich ganz einfach: Sie einfach ein doppeltes Klick-Bindungsmuster für die gewünschte Verhalten verwenden müssen:

1. Hören Ereignis auf .dropdown klicken und aktivieren Show-on- Schwebeflug-Effekt, aber haltet es davon ab, den DOM-Baum zu sprudeln/zu verbreiten, so dass er # 2 nicht stört. Dazu wird einfach gemacht Aufruf event.stopPropagation()
2. Hören Ereignis auf dem Dokument klicken, das verwendet wird, um den Show-on-Hover-Effekt

Grundsätzlich zu deaktivieren, was wir mit der Logik oben tun, ist, dass:

1. Show-on-Hover aktiviert, wenn ein Klick-Ereignis aus einem Dropdown-
2. Disable Show-on-schweben, wenn ein Klick-Ereignis irgendwo anders als aus einem Drop-Down-emittiert wird

emittiert wird,

Ich habe Ihre Logik geändert und zusätzliche Logik hinzugefügt, siehe Proof-of-Concept im folgenden Code (möglicherweise möchten Sie es im Vollbildmodus anzeigen, da das Code-Snippet eine mobile/enge Ansichtsfensteransicht anzeigen wird).

$(function() { 
 
    // Allow show on hover when dropdowns are clicked on 
 
    $('.dropdown').on('click', function(event) { 
 
    
 
    // Allow all dropdowns to show on hover 
 
    $('.dropdown').addClass('show-on-hover'); 
 
    
 
    // Open menu 
 
    $(this).toggleClass('open'); 
 
    
 
    // Prevent click event from bubbling up to document 
 
    event.stopPropagation(); 
 
    }); 
 

 
    // Disable show on hover when click event is emitted from anywhere else 
 
    $(document).on('click', function(event) { 
 
    $('.dropdown').removeClass('show-on-hover'); 
 
    }); 
 

 
    // Show on hover behavior 
 
    $('.nav').on('mouseenter', 'li.show-on-hover', function() { 
 
    $('.dropdown.open').removeClass('open'); 
 
    $(this).addClass('open'); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/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" /> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <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="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>