HTML jQuery简单下拉菜单

Posted 2021-05-24

<!-- ##################################  CSS  ################################## -->
<style type="text/css">
/* Styles: Javascript-Array.com Simple Drop-Down Menu Plugin */
/* Source: http://javascript-array.com/scripts/jquery_simple_drop_down_menu */
#jsddm {
margin: 0;
padding: 0
}
#jsddm li {	
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {	
display: block;
background: #324143;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;
}
#jsddm li a:hover {	
background: #24313C;
}
#jsddm li ul {	
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {	
float: none;
display: inline;
}
#jsddm li ul li a {	
width: auto;
background: #A9C251;
color: #24313C;
}
#jsddm li ul li a:hover	{	
background: #8EA344;
}
</style>


<!-- ##################################  JAVASCRIPT  ################################## -->
<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script type="text/javascript">
var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

function jsddm_open()
{	jsddm_canceltimer();
	jsddm_close();
	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{	closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{	if(closetimer)
	{	window.clearTimeout(closetimer);
		closetimer = null;}}

$(document).ready(function()
{	$('#jsddm > li').bind('mouseover', jsddm_open);
	$('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
</script>




<!-- ##################################  HTML  ################################## -->
<ul id="jsddm">
	<li><a href="#">JavaScript</a>
		<ul>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">jQuery Plugin</a></li>
			<li><a href="#">Ajax Navigation</a></li>
		</ul>
	</li>
	<li><a href="#">Effect</a>
		<ul>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Fade Effect</a></li>
			<li><a href="#">Opacity Mode</a></li>
			<li><a href="#">Drop Shadow</a></li>
			<li><a href="#">Semitransparent</a></li>
		</ul>
	</li>
	<li><a href="#">Navigation</a></li>
	<li><a href="#">HTML/CSS</a></li>
	<li><a href="#">Help</a></li>
</ul>
<div class="clear"></div>

jQuery 下拉菜单 ie9 兼容模式

【中文标题】jQuery 下拉菜单 ie9 兼容模式

【英文标题】：jQuery Dropdown menu ie9 compatibility mode

【发布时间】：2012-08-24 05:54:26

【问题描述】：

我创建了一个简单的 jQuery 下拉菜单。在 FF、Chrome、ie9 中工作。但是在ie兼容模式下是不行的。

HTML：

<div class="navBarCont">
<ul class="navBar gradient shadow" id="navBar">
    <li><a href="index.html">Home</a></li>
    <li class="selected"><a href="about_us.html">About Us</a></li>
    <li><a href="faq.html">FAQs</a></li>
    <li>Upcoming Events / News</li>                    
    <li>Educational
        <ul class="subnav">
            <li><a href="osteooftheknee.html">Osteoarthritis of the Knee</a></li>
            <li><a href="benefitsofexercise.html">Benefits of Exercise</a></li>
            <li><a href="didyouknow.html">Did You Know?</a></li>
        </ul>
    </li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

JS：

$(document).ready(function()
    $('.navBar li').hover(function () 
        $('ul', this).stop().slideDown(100);
    , function () 
        $('ul', this).stop().slideUp(100);
    ); 
);

CSS：

.navBarCont 位置：相对； 顶部：-15px； z-index：自动； 宽度：714px； 边距：0 自动； 背景：#fff; .navBar 光标：指针； z 指数：95； 位置：相对； 高度：28px； 向左飘浮; 颜色：#ffffff； 字体系列：arial； 字体大小：0.97em； -webkit-border-radius：5px； -moz-边界半径：5px； 边框半径：5px； 背景：#fff; .navBar>li 向左飘浮; 显示：块； 高度：23px； 右边框：细实线#ffffff； 填充：5px 18px 0； 位置：相对； 背景：RGB（109,179,242）； /* 旧浏览器 */ /* IE9 SVG，需要有条件地覆盖 'filter' 到 'none' */ 背景：URL（数据：图像/ SVG + xml的; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0YTNlZSIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzM2OTBmMCIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTY5ZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ + CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +）; 背景：-moz-linear-gradient（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* FF3.6+ */ 背景：-webkit-渐变（线性，左上，左下，颜色停止（0％，rgba（109,179,242,1）），颜色停止（50％，rgba（84,163,238,1）），颜色停止（51 %, rgba(54,144,240,1)), color-stop(100%, rgba(30,105,222,1))); /* Chrome,Safari4+ */ 背景：-webkit-linear-gradient（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* Chrome10+,Safari5.1+ */ 背景：-o-linear-gradient（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* 歌剧 11.10+ */ 背景：-ms-线性梯度（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* IE10+ */ 背景：线性梯度（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* W3C */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0); /* IE6-8 */ 文本对齐：居中； .navBar li:hover, .arthritis .title a:hover 背景：#a5cdef； /* 旧浏览器 */ 背景：-moz-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* FF3.6+ */ 背景：-webkit-渐变（线性，左上角，左下角，颜色停止（0%，#a5cdef），颜色停止（50%，#4e8edb），颜色停止（51%，#337add），颜色-停止（100%，#163a9e））； /* Chrome,Safari4+ */ 背景：-webkit-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* Chrome10+,Safari5.1+ */ 背景：-o-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* 歌剧 11.10+ */ 背景：-ms-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* IE10+ */ 背景：线性渐变（到底部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* W3C */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cdef', endColorstr='#163a9e',GradientType=0); /* IE6-9 */ .navBar li.selected>a, .navBar li.selected 颜色：#ffffb9； .navBar li.selected 背景：#a5cdef； /* 旧浏览器 */ 背景：-moz-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* FF3.6+ */ 背景：-webkit-渐变（线性，左上角，左下角，颜色停止（0%，#a5cdef），颜色停止（50%，#4e8edb），颜色停止（51%，#337add），颜色-停止（100%，#163a9e））； /* Chrome,Safari4+ */ 背景：-webkit-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* Chrome10+,Safari5.1+ */ 背景：-o-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* 歌剧 11.10+ */ 背景：-ms-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* IE10+ */ 背景：线性渐变（到底部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* W3C */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cdef', endColorstr='#163a9e',GradientType=0); /* IE6-9 */ .navBar>li:last-child 右边界：无； -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; 边框半径：0 5px 5px 0； .navBar>li:first-child -webkit-border-radius：5px 0 0 5px； -moz-边界半径：5px 0 0 5px； 边框半径：5px 0 0 5px； .navBar ul 位置：绝对； 左：0； 文字装饰：无； 列表样式：无； 显示：无； 填充：10px； 文本对齐：左； 边框顶部：无； z 指数：90； 顶部：28px； 颜色：#fff; -moz-border-radius-topleft：0px； -moz-border-radius-topright：0px； -moz-border-radius-bottomright：5px； -moz-border-radius-bottomleft: 5px; -webkit-border-radius：0px 0px 5px 5px； 边框半径：0px 0px 5px 5px； 背景：#6db3f2； /* 旧浏览器 */ 背景：-moz-linear-gradient（顶部，#6db3f2 0%，#1e69de 100%）； /* FF3.6+ */ 背景：-webkit-渐变（线性，左上，左下，颜色停止（0％，#6db3f2），颜色停止（100％，#1e69de））； /* Chrome,Safari4+ */ 背景：-webkit-linear-gradient（顶部，#6db3f2 0%，#1e69de 100%）； /* Chrome10+,Safari5.1+ */ 背景：-o-linear-gradient（顶部，#6db3f2 0%，#1e69de 100%）； /* 歌剧 11.10+ */ 背景：-ms-线性梯度（顶部，#6db3f2 0%，#1e69de 100%）； /* IE10+ */ 背景：线性渐变（到底部，#6db3f2 0%，#1e69de 100%）； /* W3C */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0); /* IE6-9 */ .navBar 一个 颜色：#fff; 文字装饰：无； .navBar ul li 明确：两者； 向左飘浮; 填充：5px； 右边界：无； .navBar ul li a 颜色：#fff; 文字装饰：无；

【参考方案1】：

试试这个

$(document).ready(function()
    $('.navBar li').hover(function () 
           $('ul', this).stop(true,true).slideDown(100);
, function () 
    $('ul', this).stop(true,true).slideUp(100);
);​
   );