我有这个JavaScript的大型菜单,不会在IE8中显示。它在所有其他浏览器中运行得非常好。通常,我不会关心很多,但我们的客户年龄较大,我们实际上在这个浏览器中有很多流量。有什么提示吗?
使用Jquery 1.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>
HTML:
<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>
我在Shopify工作,因此那里的液体处理器,不介意它们。
我在我的主题中添加了条件评论,但它仍然没有帮助。 &LT; /脚本&GT;