1

作成しようとしているアクセス可能なトグル ナビゲーションに関するヘルプを探しています。「アクセス可能」とは、jQuery slideUp および SlideDown を使用するときにデフォルトで追加される「display:none」を回避しようとしていることを意味します。

私はこれまで持っています: http://jsfiddle.net/6KX49/2/、これは私が Chris Coyier によって見つけた悪いフランケンシュタインです: http://jsfiddle.net/chriscoyier/zgtfA/1/ .

これは私のスクリプトです（jsfiddleリンクの詳細）：

var $button = $('.navigation-title a'),
    $accordion = $('.global-nav ul');

$button.click(function () {

    if ($accordion.hasClass('inactive')) {
        $accordion.slideDown(1000, function () {
            $accordion.removeClass('inactive');
        });
    } else {
        $accordion.slideUp(1000, function () {
            $accordion.addClass('inactive').slideDown(0);
        });
    }
});

機能しているようです-折りたたまれたナビゲーションには「display:block;」のスタイルがあります そのため、「display:none」は何らかの形で上書きされています。jQuery に関しては、私は完全なダミーなので、それがどのように行われているかを本当に知っているとは正直に言えません。

私が助けを必要としている問題は、slideDown アニメーションが機能していないことです。なぜそれが考えられるのでしょうか？どんな助けでも感謝します。

4

1 に答える 1

1

slideDownには2つの問題があります。1つ目は、すべてのslideDown効果が完了した後でのみ、非アクティブなクラスを削除することです。そのため、効果全体を通してナビゲーションは表示されません。

$accordion.slideDown(1000, function () {
  $accordion.removeClass('inactive'); //Only executed after the slideDown effect being executed.
});

2番目の問題は、メニューが非アクティブのときにスライド効果を実行する「ハック」が間違っていることです。

$accordion.slideDown(1000, function () { //$accordion.slideUp(0, function () {
  $accordion.removeClass('inactive'); //$accordion.removeClass('inactive').slideDown(1000);
});

このコードは、slideToggle：http://jsfiddle.net/bpinto/aAQcJ/を使用して簡略化できます。これは、display：noneを使用してナビゲーションを非表示にします。

slideDown / slideUp関数について注意すべき重要な点の1つは、jqueryが要素の表示を制御するためにdisplay：noneスタイルを追加することです。したがって、ハックにはメリットがありません。ハックは、その位置を使用して要素の外観を制御します。

slideToggleバージョンの方が優れていると思いますが、これは更新されたコードです：http: //jsfiddle.net/bpinto/smh8T/

于 2013-01-27T11:36:33.107 に答える