个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:35:53 25 4
gpt4 key购买 nike

我拼凑了一些代码并制作了一个 slide-y 水平下拉导航栏，但问题是虽然它在 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>

最佳答案

对于 Internet Explorer，您需要对其施加一些限制，否则它将以令人心碎的方式结束。

使用适当的文档类型，例如(尽管有很多文档类型):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""https://www.w3.org/TR/html4/loose.dtd ">

然后在文档类型的正下方添加以下行:

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

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

您还应该查看 http://jqueryui.com/看看他们提供了什么酷炫的装饰品来帮助您展示信息。

希望对您有所帮助。

关于javascript - 下拉菜单在 Internet Explorer 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41479194/

25 4 0
文章推荐： css - 如何通过css更改RCP应用程序中Mpart选项卡的样式？
文章推荐： jquery - 从许多背景图像中动画化一个背景图像
文章推荐： c++ - 在基于 Makefile 的解决方案中使用 Visual Studio 调试器
文章推荐： javascript - 为什么我不能使用自定义选定属性？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com