如何在移动设备上修复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中。