Zurb Foundation 6: Dropdown JS Datenoptionsattribut funktioniert nicht wie erwartet

Question

Ich verwende die neueste Version von ZURB Foundation Flex mit (cdnjs v6.3.1). Ich benutze die dropdown JS component, die absolut gut aus der Box funktioniert, aber ich bin nicht in der Lage, es mit der eingebauten data-options="" anpassen, es einfach nicht die Optionen überhaupt zu erkennen. Da ich Flex benutze, habe ich das als ein Problem angesehen, also habe ich versucht, eine Positionsklasse unter Verwendung von Datenoptionen hinzuzufügen, und diese Option wurde ebenfalls ignoriert.

Hier ist mein HTML:

<nav> 
    <ul class="menu-one"> 
    <li><a href="/" title="">Link 1</a></li> 
    <li><a href="/" title="">Link 2</a></li> 
    <li><a data-toggle="link-three">Link 3</a></li> 
    </ul> 
    <div class="dropdown-pane bottom" id="link-three" data-dropdown data-options="data-v-offset: 300px; data-h-offset: 300px;"> 
    <ul class="menu-two"> 
     <li><a href="" title="">Link 3 A</a></li> 
     <li><a href="" title="">Link 3 B</a></li> 
     <li><a href="" title="">Link 3 C</a></li> 
    </ul> 
    </div> 
</nav> 

Und Grund JavaScript:

$(document).foundation(); 

Ich habe es auch ohne Glück in 6.3.0 getestet und ich glaube, dass dies Entweder ein Fehler oder höchstwahrscheinlich etwas, was ich falsch mache, oder einfach weil dies möglicherweise nicht im Flex unterstützt wird.

JsFiddle:

Um für die Gemeinschaft des Stackoverflow der Dinge einfacher zu beantworten, ich jsFiddle gemacht habe.

Answer 1

Es ist nicht fabelhaft gut dokumentiert, aber Sie müssen das Format der Option ändern, um die Bindestriche und "Daten" zu entfernen, wenn Sie das Attribut data-options verwenden. Grundsätzlich data-v-offset ==>vOffset z.B.

Vague documentation, you have to read between the lines

<nav> 
    <ul class="menu-one"> 
    <li><a href="" title="">Link 1</a></li> 
    <li><a href="" title="">Link 2</a></li> 
    <li><a data-toggle="link-three">Link 3 (Dropdown)</a></li> 
    </ul> 
    <div class="dropdown-pane bottom" id="link-three" data-dropdown data-options="vOffset:300; hOffset:300;"> 
    <ul class="menu-two"> 
     <li><a href="" title="">Link 3 A</a></li> 
     <li><a href="" title="">Link 3 B</a></li> 
     <li><a href="" title="">Link 3 C</a></li> 
     <li><a href="https://simonhayter.co.uk" title="Simon Hayter">SimonHayter.co.uk</a></li> 
    </ul> 
    </div> 
</nav> 

JSFiddle aktualisiert.