SlideToggle 在 IE 9 中停止工作
在升级到 IE 9 之前,我没有遇到任何问题。
这是 javascript:
jQuery.noConflict();
var $j = jQuery;
$j(document).ready(function () {
$j('div.menu_class').click(function () {
$j('ul.the_menu').slideToggle('medium');
});
});
这是 html:
<div id="button" class="menu_class">
<ul class="the_menu">
<li><a href="/houston.html">Houston</a></li>
</ul>
</div>
这是 CSS:
#button {
height: 32px;
width: 184px;
margin: auto;
background-image: url(button.png);
background-repeat: no-repeat;
background-position:0 0;
position:absolute;
left: 499px;
top: 71px;
color:#FFF;
font-size:20px;
font-weight: bold;
text-align:center;
line-height:32px;
z-index:1;
}
#button ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
border:1px solid #1c1c1c;
cursor:pointer;
}
.the_menu {
display:none;
width:184px;
border: 1px solid #1c1c1c;
font-size:14px;
text-align:left;
line-height:16px;
z-index:1;
position:absolute;
top:33px;
left:0;
}
.the_menu li {
background-color: #302f2f;
margin:0;
padding:0;
list-style:none;
display:block;
float:left;
width:100%;
}
.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
关于问题可能是什么或如何解决它的任何想法?
谢谢,
蒂姆
I've had no problems until I upgraded to IE 9.
Here is the javascript:
jQuery.noConflict();
var $j = jQuery;
$j(document).ready(function () {
$j('div.menu_class').click(function () {
$j('ul.the_menu').slideToggle('medium');
});
});
Here is the html:
<div id="button" class="menu_class">
<ul class="the_menu">
<li><a href="/houston.html">Houston</a></li>
</ul>
</div>
Here is the CSS:
#button {
height: 32px;
width: 184px;
margin: auto;
background-image: url(button.png);
background-repeat: no-repeat;
background-position:0 0;
position:absolute;
left: 499px;
top: 71px;
color:#FFF;
font-size:20px;
font-weight: bold;
text-align:center;
line-height:32px;
z-index:1;
}
#button ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
border:1px solid #1c1c1c;
cursor:pointer;
}
.the_menu {
display:none;
width:184px;
border: 1px solid #1c1c1c;
font-size:14px;
text-align:left;
line-height:16px;
z-index:1;
position:absolute;
top:33px;
left:0;
}
.the_menu li {
background-color: #302f2f;
margin:0;
padding:0;
list-style:none;
display:block;
float:left;
width:100%;
}
.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
Any ideas on what the problem could be or how to fix it?
Thanks,
Tim
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
抱歉重开旧帖子!
我在使用 IE9 时也遇到了这个问题,我发现最好的解决方案是将切换实际应用到 LI 而不是 UL,这很有魅力!
sorry to reopen an old post!
I encountered this problem with IE9 too, the best solution I found was to actually apply the toggle to the LI instead of the UL, worked a charm!
- JQuery 问题票 11168
- JQuery Issue Ticket 11168