0

我正在尝试让 Foundation 下拉菜单在浏览器中运行，但在所有版本的 IE（特别是 7-10）中都会遇到问题。

我已将此处描述的 JS 下拉菜单 ( http://foundation.zurb.com/docs/components/dropdown.html ) 实现为过滤器菜单。它适用于 Chrome 和 FF，但不适用于 IE。

IE 中的控制台没有告诉我发生了什么。我的猜测是它与IE缓存activeClass有关，因此下拉菜单永远不会用新的绝对坐标更新？我说不清楚，我有点迷茫。

这是我的代码和实时页面的链接（http://lp-beta.myshopify.com/collections/all——密码是“堆栈”）——

<div class='row options-style'>
  <ul class='large-block-grid-3'>
    <li><a href="#" data-dropdown='brand-filters'>BY BRAND</a></li>
    <li><a href="#" data-dropdown='percent-filters'>BY COCAO PERCENTAGE</a></li>
    <li><a href="#" data-dropdown='flavor-filters'>BY FLAVOR PROFILE</a></li>
  </ul>
</div>

<ul class='f-dropdown options' id='brand-filters' data-dropdown-content>
  <li><div class='option-value'><a href='/collections/all'>All brands</a></div></li>
  {% for product_vendor in shop.vendors %}
    <li><div class='option-value'>{{product_vendor | link_to_vendor }}</div></li>
  {% endfor %}
</ul>

<ul class='f-dropdown options' id='flavor-filters' data-dropdown-content data-option-key='filter'>
  <li><a class='option-value' id='chocolatey' data-option-value='.chocolatey'>Chocolatey</a></li>
  <li><a class='option-value' id='citrus' data-option-value='.citrus'>Citrus</a></li>
  <li><a class='option-value' id='fruity' data-option-value='.fruity'>Fruity</a></li>
  <li><a class='option-value' id='floral' data-option-value='.floral'>Floral</a></li>
  <li><a class='option-value' id='earthy' data-option-value='.earthy'>Earthy</a></li>
  <li><a class='option-value' id='nutty' data-option-value='.nutty'>Nutty</a></li>
  <li><a class='option-value' id='spicy' data-option-value='.spicy'>Spicy</a></li>
  <li><a class='option-value' id='creamy' data-option-value='.creamy'>Creamy</a></li>
</ul>

<ul class='f-dropdown options' id='percent-filters' data-dropdown-content data-option-key='filter'>
  <li><a class='option-value' id='forty' data-option-value='.forty'> Below 40%</a></li>
  <li><a class='option-value' id='sixty' data-option-value='.sixty'> 41% to 60%</a></li>
  <li><a class='option-value' id='eighty' data-option-value='.eighty'> 61% to 80%</a></li>
  <li><a class='option-value' id='hundred' data-option-value='.hundred'> Above 80%</a></li>
</ul>
4

1 回答 1

2

Foundation 4 不支持 IE 8 及更低版本。Foundation 3 支持 IE 8 但不支持 IE 7。查看网站以获取 Foundation 3 IE 7 补丁。

您的页面有多个对 jquery.js（1.7、1.9...）和 zepto.js 的引用。Zepto.js 不支持 IE；你可以用 jquery.js 替换它；它们是兼​​容的。如果可能，请尝试标准化一个 jquery 版本。

于 2013-05-09T00:22:34.790 回答