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

我还尝试指定一个类（open），当用户点击/单击按钮时，该类应该被添加：

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

使用以下css来查看此类是否可以执行任何操作。它看起来甚至没有被利用。

.open{
   display:none;
}

我可以用jquery或更好的CSS来解决这个问题。我希望这不是基金会的错误。

Answer 1

你在基金会5上吗？我注意到从4升级到5之后，您需要父元素上的“data-dropdown-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中未定义的属性。