Foundation 6 Drop-Down-Menü können nicht auf Untermenüs klicken Sie auf mobilen Geräten

Hallo Kolleginnen und Entwickler .. Ich habe ein Problem mit der Gründung Dropdown-Menü, und nach einiger Zeit der Bewältigung des Problems ich für Ihre Hilfe zu suchen, Stiftung Gurus.Foundation 6 Drop-Down-Menü können nicht auf Untermenüs klicken Sie auf mobilen Geräten

Ich verwende Stiftung 6.2.4-voll. Ich habe ein Dropdown-Menü erstellt, aber ich habe ein Problem festgestellt, das Problem liegt bei der Verwendung des Menüs mit mobilen Geräten (versuchen Sie iPhone 4). Die Untermenüpunkte sind nicht anklickbar. Klicken Sie zum Beispiel auf die Option Karte, und klicken Sie dann auf Pokemons-Unteroption. Der Code ist unten eingebettet. Ich kann das Problem nicht finden, ich bin ziemlich neu in der Gründung, vielleicht fehlt mir eine wichtige Option?

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="device-width=width, initial-scale=1"> 
 
    <link rel="stylesheet" href="/css/foundation/foundation.min.css"> 
 
    <script src="/js/jquery_2.2.4.min.js"></script> 
 
    <script src="/js/foundation/what-input.js"></script> 
 
    <script src="/js/foundation/foundation.min.js"></script> 
 
</head> 
 
<body> 
 
<script> 
 
    $(document).ready(function() { 
 
     $(document).foundation(); 
 
    }); 
 
</script> 
 
<nav class="top-bar"> 
 
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu> 
 
     <li><a href="/">Home</a></li> 
 
     <li class="has-submenu"> 
 
      <a href="/">Map</a> 
 
      <ul class="menu submenu vertical nested" data-submenu> 
 
       <li><a href="">Pokemons</a></li> 
 
       <li><a href="">Poke Gyms</a></li> 
 
       <li><a href="">Poke Stops</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="">news</a></li> 
 
     <li class="has-submenu"> 
 
      <a>Guides</a> 
 
      <ul class="menu submenu vertical nested" data-submenu> 
 
       <li> 
 
        <a href="">Game guides</a> 
 
       </li> 
 
       <li> 
 
        <a href="">Site guides</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav> 
 
</body> 
 
</html>

Quelle

2016-12-26 Cybersnake

jedermann? Vielleicht ein Ratschlag oder etwas, vielleicht ein Drittanbieter-Plugin verwenden, wenn das Menü abgehört wird? – Cybersnake

Ihre Ladereihenfolge ist falsch, laden Sie die jQuery und Javascripts in der Fußzeile Ihres Dokuments, dann feuern Fundament dort, nicht im Kopf des Dokuments - Ihr Snippet wirft einen jQuery-Fehler: "Guides Spielhilfen Seitenführungen { "message": "Reference: ist $ nicht definiert", "Dateiname": "http://stacksnippets.net/js", "lineno": 22, "colno": 5 }“ –

Es tut mir leid, aber ich denke nicht, dass die Reihenfolge falsch ist. Es erzeugt hier einen Fehler, nur weil es die Dateien nicht finden kann, war ich zeige mein Layout für andere zu verstehen, welche Versionen und Dateien, die ich – Cybersnake

Dies, geben Sie ihm gehen auf Handy zu funktionieren scheint, ich glaube Foundation mobil erkennt und den Hover in einen Klick aktivieren, werden alle Ereignisse in ihrer Dokumentation sind hier: https://foundation.zurb.com/sites/docs/dropdown-menu.html.

Hier ist mein Beispiel, das funktioniert:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="device-width=width, initial-scale=1"> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/> 
 
</head> 
 
<body> 
 
<nav class="top-bar"> 
 
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu> 
 
     <li><a href="/">Home</a></li> 
 
     <li class="has-submenu"> 
 
      <a href="/">Map</a> 
 
      <ul class="menu submenu vertical nested" data-submenu> 
 
       <li><a href="">Pokemons</a></li> 
 
       <li><a href="">Poke Gyms</a></li> 
 
       <li><a href="">Poke Stops</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="">news</a></li> 
 
     <li class="has-submenu"> 
 
      <a>Guides</a> 
 
      <ul class="menu submenu vertical nested" data-submenu> 
 
       <li> 
 
        <a href="">Game guides</a> 
 
       </li> 
 
       <li> 
 
        <a href="">Site guides</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $(document).foundation(); 
 
    }); 
 
</script> 
 
</body> 
 
</html>

Quelle

2017-01-25 13:48:32

Und das Verhalten zu ändern, auf Mobile zu klicken, folgen Sie den Anweisungen hier: http://foundation.zurb.com/sites/docs/top-bar.html#advanced-layout, verwenden Sie das „Responsive Toggler Plugin“. –

Ich habe bereits eine andere Lösung gefunden. Ich benutze eine Bibliothek von Drittanbietern, die meinen Bedürfnissen entspricht. Aber danke für deine Antwort, ich überprüfe den Code und schreibe zurück. – Cybersnake

Cool, mit was bist du gegangen? –

Foundation 6 Drop-Down-Menü können nicht auf Untermenüs klicken Sie auf mobilen Geräten

Antwort

Verwandte Themen