首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jquery accordion在IE 8中不起作用

jquery accordion在IE 8中不起作用
EN

Stack Overflow用户
提问于 2012-12-06 00:26:36
回答 3查看 6.8K关注 0票数 0

所以这个jquery accordion在IE8中不起作用,但在Firefox、Chrome和Safari中却可以很好地工作。怎么回事?

这是小提琴,http://jsfiddle.net/jEeqQ/

以下是脚本链接和代码

代码语言:javascript
运行
复制
<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:

代码语言:javascript
运行
复制
<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:

代码语言:javascript
运行
复制
    .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在移动设备上打开得很高时,它可以添加一些滚动。

任何帮助都是非常感谢的。谢谢。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 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/

票数 1
EN

Stack Overflow用户

发布于 2012-12-06 00:42:07

在加载jQueryUI本身之前,您正在尝试使用jQueryUI方法。只要在jQuery之后加载,它就会工作:

代码语言:javascript
运行
复制
<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>
票数 0
EN

Stack Overflow用户

发布于 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问题。

:我想这会对你有帮助的

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13727789

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档