所以这个jquery accordion在IE8中不起作用,但在Firefox、Chrome和Safari中却可以很好地工作。怎么回事?
这是小提琴,http://jsfiddle.net/jEeqQ/
以下是脚本链接和代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$( ".blurb, .contributors" ).accordion({
activate: function( event, ui ) {}
});
</script>
<script>$(document).ready(function($) {
$( ".blurb, .contributors" ).on( "accordionactivate", function( event, ui ) {
event.preventDefault();
$('html,body').animate({scrollTop:$(".ui-accordion-content").offset().top}, 500);
});
});
</script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( ".blurb" ).accordion({
collapsible: true,
heightStyle: "content",
active:false
});
});
</script>
HTML:
<div class="blurb">
<h3></h3>
<div>
<div class="text_center full left padding">
<h1 class="uppercase">#fridayfacts</h1>
<h6>Join us on twitter every friday</h6><br>
<h6 class="text_center"><a class="button" href="https://twitter.com/rcumsu" target="_blank">@rcumsu</a></h6>
</div>
<div class="text_left full right">
<h6>Fact:</h6>
<div class="text_left padding half left">
<p>The US needs 34% more students in STEM to keep up w/ economic demand. CTE helps meet that need.</p>
<p>Too many MS students drop out, often because they don't see real-world value of a degree. With CTE, they connect learning to work.</p>
<p>13K people with 4-yr degrees have re-entered MS community colleges to gain job skills. CTE prepares them for a profession.</p>
<p>20M+ in the US are un/underemployed, yet 3.4M jobs are unfilled due to skills gaps. CTE gives students the skills they need to find work.</p>
</div>
<div class="text_left padding half right">
<p>Employers value real-world, hands-on job experience. With CTE, MS students gain this experience early and qualify for more jobs.</p>
<p>STEM ed is crucial to US competitiveness in technology. CTE helps get kids in those fields faster. </p>
<p>By 2018, the US will need 22 million associate or higher degrees to fuel the economy. With CTE, MS students will be ready.</p><br><br><br>
</div>
</div>
</div>
</div>
CSS:
.blurb, .contributors {
/*
display: block;
float: left;
height: 0;*/
position:absolute;
bottom:0;
width: 100%;
}
.flex-viewport .blurb {
bottom:-15px;
}
.blurb_padding {
padding-bottom:50px;
}
.ui-accordion {
height:0;
}
.ui-accordion-header {
font-family: 'BrandonGrotesqueMedium';
font-size:16px;
text-transform:uppercase;
letter-spacing:1.5px;
line-height:12px;
padding:26px;
background:#FBAF39;
position: relative;
bottom: 64px;
cursor: pointer;
opacity: 1;
-webkit-transition: all .3s ease;
margin:0 auto;
text-align:center;
color: #FFFFFF;
z-index:9999;
}
.blurb .ui-accordion-header {
width:60px;
}
.contributors .ui-accordion-header {
width:150px;
}
.ui-state-default.ui-accordion-header.ui-accordion-header-active.ui-state-hover {
background:#FFFFFF;
color:#FBAF39;
}
.ui-state-default.ui-accordion-header.ui-state-hover{
background:#DDDDDD;
color:#777C76;
}
.ui-accordion-header-active {
background:#fbfbfb;
color:#FBAF39;
}
.blurb .ui-state-default.ui-accordion-header:after {
content:"extra";
}
.blurb .ui-state-default.ui-accordion-header.ui-accordion-header-active:after {
content:"close";
}
.contributors .ui-state-default.ui-accordion-header:after {
content:"contributors";
}
.contributors .ui-state-default.ui-accordion-header.ui-accordion-header-active:after {
content:"close";
}
.ui-accordion-content {
background:#FBAF39;
background-repeat: repeat;
color:#FFFFFF;
width:90%;
padding:3% 5% 55px;
position:absolute;
bottom:0;
}
.ui-accordion-content a.button {
background:#fbfbfb;
padding:13px;
line-height:12px;
color:#FBAF39;
}
.ui-accordion-content a.button:hover, .ui-accordion-content a.button:active {
background-color:#FFFFFF;
color:#FBAF39;
}
.ui-accordion-content h6, .ui-accordion-content .lowlight, .ui-accordion-content .highlight, .ui-accordion-content .midlight, .ui-accordion-content h1 {
color:#FFFFFF;
}
.ui-accordion-content p, .ui-accordion-content .text {
color:#FFFFFF;
}
.ui-accordion ul {
margin:0;
font-family: 'Tienne'; font-weight: 400;
font-size:16px;
color:#FFFFFF;
line-height: 18px;
}
.ui-accordion .icon {
background-color:#FFFFFF;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
margin-right:10px;
}
上面有一些自定义的jquery,当accordion在移动设备上打开得很高时,它可以添加一些滚动。
任何帮助都是非常感谢的。谢谢。
发布于 2012-12-06 00:44:44
将您的jquery库更新到更高的版本,如1.8.3,它可以工作,除非您特别需要1.7.1
我已经更新了fiddle,你给...does的不是在IE8的1.7.1版本,而是在IE8的1.8.3版本
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>
更新的fiddle http://jsfiddle.net/jEeqQ/10/
发布于 2012-12-06 00:42:07
在加载jQueryUI本身之前,您正在尝试使用jQueryUI方法。只要在jQuery之后加载,它就会工作:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$( ".blurb, .contributors" ).accordion({
activate: function( event, ui ) {}
});
</script>
发布于 2013-07-12 19:43:55
即使我有相同的problem.but,我也使用这些指令解决了这个问题。
说明1
从“开始”菜单或桌面加载Internet Explorer8,然后浏览到Google Chrome Frame网站。阅读服务条款后,单击"Get Google Chrome Frame“按钮,然后单击"Accept and Install”按钮。让Internet Explorer 8下载Google Chrome Frame,并在安装完成后单击“关闭”按钮。
2
单击“开始”按钮,然后在“搜索程序和文件”文本框中键入"regedit“。按键盘上的"Enter“键启动注册表编辑器。展开"HKEY_CURRENT_USER“文件夹,然后双击出现在其下方的”软件“文件夹。右键单击“软件”中的"Google“文件夹,然后指向”新建“。选择"Key“并键入不带引号的"ChromeFrame”。
3右击注册表编辑器右面板中的空白区域,然后选择“新建”。选择“DWORD值”并键入不带引号的"AllowUnsafeURLs“。双击"AllowUnsafeURLs“条目,并将值数据设置为”1“。单击“确定”按钮并关闭注册表编辑器。
4重新启动Internet Explorer8并打开jQuery出现问题的页面。单击Internet Explorer8地址栏,并将文本光标放在"http://“text.键入"gcf:“,不带引号或空格,然后按"Enter”键修复jQuery问题。
:我想这会对你有帮助的
https://stackoverflow.com/questions/13727789
复制相似问题