0

したがって、このjqueryアコーディオンはIE 8では機能しませんが、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がいくつかあります。

どんな助けでも大歓迎です。ありがとう。

4

3 に答える 3

1

jqueryライブラリを1.8.3などのより高いバージョンに更新すると、特に1.7.1が必要でない限り機能します。

私はあなたが与えたフィドルを更新しました...IE8では1.7.1では機能しませんが、IE8では1.8.3で機能します

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>

更新されたフィドル http://jsfiddle.net/jEeqQ/10/

于 2012-12-05T16:44:43.613 に答える
0

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>
于 2012-12-05T16:42:07.390 に答える
0

私も同じ問題を抱えていましたが、これらの手順を使用してその問題を解決しました。

指示1

[スタート]メニューまたはデスクトップからInternetExplorer8をロードし、GoogleChromeフレームのWebサイトにアクセスします。利用規約を読んだ後、[Google Chromeフレームを取得]ボタンをクリックし、[同意してインストール]ボタンをクリックします。Internet Explorer8にGoogleChromeフレームをダウンロードさせ、インストールが完了したら[閉じる]ボタンをクリックします。

2

「スタート」ボタンをクリックし、「プログラムとファイルの検索」テキストボックスに「regedit」と入力します。キーボードの「Enter」キーを押して、レジストリエディタを起動します。「HKEY_CURRENT_USER」フォルダを展開し、その下に表示される「Software」フォルダをダブルクリックします。「ソフトウェア」内の「Google」フォルダを右クリックし、「新規」をポイントします。「キー」を選択し、引用符なしで「ChromeFrame」と入力します。

3レジストリエディタの右側のパネル内の空のスペースを右クリックして、[新規]を選択します。「DWORD値」を選択し、引用符なしで「AllowUnsafeURLs」と入力します。「AllowUnsafeURLs」エントリをダブルクリックし、値データを「1」に設定します。「OK」ボタンをクリックして、レジストリエディタを閉じます。

4 Internet Explorer 8を再起動し、jQueryに問題があるページを開きます。Internet Explorer 8のアドレスバーをクリックし、「http：//」テキストの前にテキストカーソルを置きます。引用符やスペースなしで「gcf：」と入力し、「Enter」キーを押してjQueryの問題を修正します。

：私はそれがあなたを助けると思います

于 2013-07-12T11:43:55.120 に答える