用于下拉菜单的Javascript在IE8中不工作

我有一个大型菜单的JavaScript，它不会显示在IE8中。它在所有其他浏览器中都能正常工作。通常情况下，我不会太在意，但我们的客户年龄较大，而且我们在这个浏览器中有很多流量。有什么建议吗

使用jquery1.10.2

Javascript:

<script>
jQuery(".mega-menu-handle-1").hover(
function() {
jQuery(".mega-menu-1").addClass("display-mega");
},
function() {
jQuery(".mega-menu-1").removeClass("display-mega");
});</script>

<script>jQuery(".mega-menu-handle-2").hover(
function () {
jQuery(".mega-menu-2").addClass("display-mega");
},
function () {
jQuery(".mega-menu-2").removeClass("display-mega");
});</script>

<script>jQuery(".mega-menu-handle-4").hover(
function () {
jQuery(".mega-menu-4").addClass("display-mega");
},
function () {
jQuery(".mega-menu-4").removeClass("display-mega");
});</script>

jQuery（“.mega-menu-handle-1”）。悬停(
函数（）{
jQuery（“.mega-menu-1”）.addClass（“display mega”）；
},
函数（）{
jQuery（“.mega-menu-1”）.removeClass（“display mega”）；
});
jQuery（“.mega-menu-handle-2”）。悬停(
函数（）{
jQuery（“.mega-menu-2”）.addClass（“display mega”）；
},
函数（）{
jQuery（“.mega-menu-2”）.removeClass（“display mega”）；
});
jQuery（“.mega-menu-handle-4”）。悬停(
函数（）{
jQuery（“.mega-menu-4”）.addClass（“display mega”）；
},
函数（）{
jQuery（“.mega-menu-4”）.removeClass（“display mega”）；
});

HTML:

商店


按品牌

{%链接列表中的链接。空气净化器品牌。链接%}

{%endfor%}

更多产品

{%用于链接列表中的链接。空气净化器-更多产品。链接%}

{%endfor%}



关切地

{%用于LinkList.shop-by-concern.links%中的链接}

{%endfor%}





学习
关于空气净化器

{%用于链接列表中的链接。空气净化器-learn.links%}

{%endfor%}







商店
按品牌

{%用于LinkList.air-filter-brands.links%中的链接}

{%endfor%}



学习
关于空气净化器过滤器

{%用于链接列表中的链接。关于-air-Purizer-filters.links%}

{%endfor%}

关于家用空调过滤器

{%用于链接列表中的链接。关于-home-hvac-filters.links%}

{%endfor%}







学习

{%用于链接列表中的链接。learning-center-learn.links%}

{%endfor%}



比较

{%用于链接列表中的链接。learning-center-compare.links%}

{%endfor%}



前三名空气净化器

{%用于链接列表中的链接。learning-center-top-3.links%}

{%endfor%}



文章

{%用于链接列表中的链接。learning-center-articles.links%}

{%endfor%}



支持

{%用于链接列表中的链接。learning-center-support.links%}

{%endfor%}

我在Shopify工作，所以那里的液体手柄，别介意

我在我的主题中添加了有条件的评论，但仍然没有帮助。

---

如果您只是通过

悬停事件来应用和删除类，您是否考虑过使用CSS而不是javascript？例如：
.mega-menu-handle-1:hover.mega-menu-1{display mega-here的属性}
。这是一种与您的问题相关的旧的下拉列表方式（在IE6中使用过！）——我要说明您使用的jQuery版本。最新的jQuery 2.x在IE8上不起作用。这可以解释为什么上面的代码不起作用。我正在尝试修复其他开发人员所做的事情。我当然可以尝试一下，但我只是想知道是否有一个更简单的修复方式，它已经发展，我可以做的。“ol CSS”菜单是我的常规选择，因为它看起来非常防弹。非常感谢@AdamKewleyI将此条件脚本添加到我的主题中，但下拉列表仍然不起作用：请确保

<div class="mega-holder">
<div class="mega-menu mega-menu-1 mega-menu-handle-1">
<ul class="block-grid columns3 no-pad">
<li>
<div class="mega-container">
<h3>Shop <a class="view-all" href="/collections/air-purifiers/" title="View All Air Purifiers">View All</a></h3>
<ul class="block-grid columns2">
<li>
<h5>By Brand</h5>
<ul class="mega-list">
{% for link in linklists.air-purifier-brands.links %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
<h5>More Products</h5>
<ul class="mega-list">
{% for link in linklists.air-purifier-more-products.links %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</li>
<li>
<h5>By Concern</h5>
<ul class="mega-list">
{% for link in linklists.shop-by-concern.links %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</li>
</ul>
</div>
</li>
<li>
<div class="mega-container">
<h3>Learn <a class="view-all" href="/pages/air-purifiers-america-learning-center">View All</a></h3>
<h5>About Air Purifiers</h5>
<ul class="mega-list">
{% for link in linklists.air-purifiers-learn.links %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
</li>
<li>
<div class="mega-container mega-ad-space"> <a href="{{ settings.mega-menu-1-link }}"> <img src="{{'mega-menu-1-image.png' | asset_url}}" alt="" /> </a> </div>
</li>
</ul>
</div>
<div class="mega-menu mega-menu-2 mega-menu-handle-2">
<ul class="block-grid columns3 no-pad">
<li>
<div class="mega-container">
<h3>Shop <a class="view-all" href="/pages/air-purifier-replacement-filters">View All</a></h3>
<h5>By Brand</h5>
<ul class="mega-list">
{% for link in linklists.air-filter-brands.links %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
</li>
<li>
<div class="mega-container">
<h3>Learn <a class="view-all" href="/pages/air-purifiers-america-learning-center">View All</a></h3>
<h5>About Air Purifier Filters</h5>
<ul class="mega-list">
{% for link in linklists.about-air-purifier-filters.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
<h5>About Home HVAC Filters</h5>
<ul class="mega-list">
{% for link in linklists.about-home-hvac-filters.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
</li>
<li>
<div class="mega-container mega-ad-space"> <a href="{{ settings.mega-menu-2-link }}"> <img src="{{'mega-menu-2-image.png' | asset_url}}" alt="" /> </a> </div>
</li>
</ul>
</div>
<div class="mega-menu mega-menu-4 mega-menu-handle-4 learning-center">
<ul class="block-grid columns5 no-pad">
<li>
<div class="mega-container">
<h5>Learn</h5>
<img src="{{ 'learning-center-1.jpg' | asset_url | image_tag }}" alt="" />
<ul class="mega-list">
{% for link in linklists.learning-center-learn.links %}
<li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
</li>
<li>
<div class="mega-container">
<h5>Compare</h5>
<img src="{{ 'learning-center-2.jpg' | asset_url | image_tag }}" alt="" />
<ul class="mega-list">
{% for link in linklists.learning-center-compare.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
</li>
<li>
<div class="mega-container">
<h5>Top 3 Air Purifiers</h5>
<img src="{{ 'learning-center-3.jpg' | asset_url | image_tag }}" alt="" />
<ul class="mega-list">
{% for link in linklists.learning-center-top-3.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
</li>
<li>
<div class="mega-container">
<h5>Articles</h5>
<img src="{{ 'learning-center-4.jpg' | asset_url | image_tag }}" alt="" />
<ul class="mega-list">
{% for link in linklists.learning-center-articles.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
</li>
<li>
<div class="mega-container last-mega-container">
<h5>Support</h5>
<img src="{{ 'learning-center-5.jpg' | asset_url | image_tag }}" alt="" />
<ul class="mega-list">
{% for link in linklists.learning-center-support.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
</li>
<div class="clear"></div>
</ul>
<div class="mega-padding">
<hr />
<a href="#" class="mega-view-all">View All</a> </div>
</div>
</div>