如何在移動設備上修復Zurb Foundation下拉問題？

Question

下面是我使用的代碼：

<div style="top-buttons"> 
      <a href="#" data-dropdown="tinyDrop"><img src="images/sandwich.gif" class="sandwich" width="30" height="30"></a> 
</div> 
<ul id="tinyDrop" class="f-dropdown" data-dropdown-content> 
    <hr>    
    <li class="navitem"><a href="#"><img src="images/group-25.png"/> Trends/Activity</a></li> 
    <hr> 
    <li class="navitem"><a href="#"><img src="images/settings2-25.png"/> Settings</a></li> 
    <hr> 
    <li class="navitem"><a href="#"><img src="images/help-25.png"/> Help</a></li> 
    <hr> 
    <li class="navitem"><a href="#"><img src="images/star-25.png"/> Rate Clustir</a></li> 
    <hr> 
    <li class="navitem"><a href="#"><img src="images/exit-25.png"/> Logout</a></li> 
    <hr> 
</ul> 

我還試圖指定這應該被添加一個類（開放）當用戶輕敲/點擊按鈕：

<script> 
    $(document).foundation({ 
     // specify the class used for active dropdowns 
     active_class: 'open' 
    }); 
</script> 

用下面的CSS看看這個班級是否可以做任何事情。它看起來並沒有被利用。

.open{ 
    display:none; 
} 

任何想法如何解決這可能與jQuery或更好的CSS。我希望這不是基金會的錯誤。

Answer 1

你在Foundation 5嗎？我從4升級到5，你需要父元素「數據下拉-INIT」屬性如下所示

<a href="#" data-dropdown-init="" data-dropdown="tinyDrop"><img src="images/sandwich.gif" class="sandwich" width="30" height="30"></a> 

沒有上面的修改之後發現，我看到的JavaScript錯誤在控制檯抱怨未定義的屬性在foundation.dropdown.js中。