0

flyoutボタンのクリックでメニュー div をスライドインし、もう一度クリックするとアウトするという関数があります。

問題 1: Chrome や FF などでは正常に動作しますが、IE9 ではflyout is undefined機能は引き続き動作しますが、それが表示されます。

問題 2: IE8 では、エラー メッセージは表示されませんが、メニューがワンクリックでスライドインおよびバックアウトします。

よくわかりませんが、両方の問題が関連していることを願っています。私は Jquery と Jquery UI にかなり慣れていないので、すべてを正しく使用しているかどうかわかりません。どんな助けでも大歓迎です。

外部 JavaScript ファイルの JS:

$(function flyout() {
    $(".btn-toggle").click(function (e) {
        var newSelector = $('#flyout-' + $(this).attr('id')),
            toggle = newSelector.css('display') == 'block';

        e.preventDefault();
        newSelector.toggle('slide', { direction: 'right' }, 300);
        $('.hide').not(newSelector).hide('slide', { direction: 'right' }, 300);

        if (!toggle) {
            newSelector.children('.l-menu').effect('highlight', 1000);
            $('a.btn-toggle i').removeClass('icon-chevron-right');
            $(this).find('.icon-chevron-left').toggleClass('icon-chevron-right');
        } else {
            $(this).find('.icon-chevron-left').toggleClass('icon-chevron-right');
        };
    });
});

HTML と JS:

<a href="#" id="fo2" class="btn btn-small btn-info btn-toggle"><i class="icon-chevron-left"></i> <i class="icon-thumbs-up"></i> Helpful Hints</a>
<a href="#" id="fo1" class="btn btn-small btn-amber btn-toggle"><i class="icon-chevron-left"></i> <i class="icon-tasks"></i> Progress</a>

<div id="flyout-fo2" class="fixed-tr hide">
    ...Menu HTML
</div>
<div id="flyout-fo1" class="fixed-tr2 hide">
    ...Menu HTML
</div>

<script type='text/javascript' language='javascript'>
    $(document).ready(function () {
        flyout();
    });
</script>
4

2 に答える 2

0

基本的に、DOM Ready コールバックに 2 つのイベント ハンドラーを追加しています。

最初

$(document).ready(function () {
    flyout();
});

そして第二に

$(function flyout() {

$(function)のショートカットです$(document).ready(function(){});。

function flyout(){}解決策は、 を個別に宣言することです。それからする

$(flyout);
于 2013-03-12T20:21:24.760 に答える
0

関数の jQuery オブジェクトを作成しています。なんで？

外部ファイルを次のように変更します。

function flyout() {
    $(".btn-toggle").click(function (e) {
        var newSelector = $('#flyout-' + $(this).attr('id')),
            toggle = newSelector.css('display') == 'block';

        e.preventDefault();
        newSelector.toggle('slide', { direction: 'right' }, 300);
        $('.hide').not(newSelector).hide('slide', { direction: 'right' }, 300);

        if (!toggle) {
            newSelector.children('.l-menu').effect('highlight', 1000);
            $('a.btn-toggle i').removeClass('icon-chevron-right');
            $(this).find('.icon-chevron-left').toggleClass('icon-chevron-right');
        } else {
            $(this).find('.icon-chevron-left').toggleClass('icon-chevron-right');
        };
    });
}
于 2013-03-12T20:16:23.980 に答える