下拉菜单在Internet Explorer中不起作用

Question

我拍了一些代码，并制作了一个可滑动显示的水平下拉导航栏，但问题是，尽管它可以在chrome和firefox中使用，但在Internet Explorer中不起作用。 这是代码。 我非常感谢大家的帮助。

 $(function () { $(".item").on("click", function () { $(this) .next().toggleClass("active"); }); $("#body").css("min-height", "100%"); }); 

 section { width: 150%; margin: 0px auto; margin-left:-15px; font-family: Raleway, sans-serif; } .item{ font-size: calc(8px + .8vw); width:9%; height: 40px; float: left; border-right: 3px solid #333333; font: monospace; padding: 10px; cursor: pointer; background-color: #B9E3C6; transform: skew(-20deg); -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); text-align: center; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); font-family: Raleway, sans-serif; } .info{ font-size: calc(8px + .8vw); float: left; width:0%; height: 40px; background: #DEF9E3; visibility: hidden; font: monospace; background-color: gr; transform: skew(-20deg); -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); text-align: center; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); transition: width ease-out .3s, visibility ease-out .3s; white-space: nowrap; overflow:hidden; padding: 10px 0; font-family: Raleway, sans-serif; } .info.active{ visibility: visible; width:12%; font-family: Raleway, sans-serif; } .nitem{ font-size: calc(8px + .8vw); width:9%; height: 40px; float: left; border-right: 3px solid #333333; font: monospace; padding: 10px; cursor: pointer; background-color: #B9E3C6; transform: skew(-20deg); -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); text-align: center; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); font-family: Raleway, sans-serif; } 

  <section> <div class="item"> about <span style='font-size: 1.3vw;'>►</span></div> <div class="info">lab | research</div> <div class="item"> people <span style='font-size: 1.3vw;'>►</span></div> <div class="info">current | alumni</div> <div class="nitem"> publications</div> <div class="nitem"> contact</div> </section> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> 

Answer 1

使用Internet Explorer，您需要对其施加一些约束，否则它将以令人心碎的结尾。

使用适当的文档类型，例如（尽管文档类型很多）：<！DOCTYPE HTML PUBLIC“-// W3C // DTD HTML 4.01 Transitional // EN”“ https://www.w3.org/TR/html4/loose .dtd “>

然后在doctype的正下方添加以下行：

<meta http-equiv =“ X-UA-Compatible” content =“ IE = EmulateIE10” />

上面的meta标签可确保IE为每个用户加载相同的版本，无论他们实际安装了什么浏览器。 我喜欢加载IE10。

您还应该查看http://jqueryui.com/ ，看看他们在酷炫的商品方面所提供的功能，以帮助您展示信息。

希望能有所帮助。