0

私がやろうとしているのspanは、ある要素をクリックDIVするとフェードアウトし、そうでない場合はそのスパンでもう一度クリックすると、それらの要素がフェードインします。css()残りの要素のいくつかのスタイルを変更するためにも使用していますその中でDIV。

コードを確認するには、こちらをご覧ください。

そして今、2つの質問/問題:

  1. 使用回数を減らすためのショートカットやテクニックはありcss()ますか?

  2. スタイル値を元の状態に戻すために条件で使用しようとするcss()と、else条件内のいずれもelse機能しないため、条件内の新しいスタイル値ifは同じままです。

修正または提案はありますか？

4

3 に答える 3

3

私がやろうとしているのは、span

いいえ 。あなたがしようとしているのは、「...をクリックしたとき」です。span

その後、いくつかの要素DIVがフェードアウトします

...adivがフェードアウトします。

それ以外の場合は、もう一度クリックしますspan

「そうでなければ、もう一度クリックしてください」と誰かが言うのを聞いたことがありますか? それがあなたの話し方でないなら、あなたもそれを書くべきではありません。

あなたが説明しようとしているのは、もう一度クリックしたときに何が起こるかですspan。実際には が何回spanクリックされたかは重要ではありません。重要なのは の状態ですdiv。あなたが説明していることは、スパンがクリックされたときに何が起こるかに戻ります。

それらの要素はフェードインします。

つまり、これまでに言おうとしたことは次のとおりです。

スパンをクリックするときは、adivが表示されているかどうかを確認してください。ある場合はフェードアウトし、そうでない場合はフェードインします。

そこで、css() を使用して、その中に残っている要素のスタイルを変更していDIVます。

あなたが言おうとしているのは、divjQueryのcssメソッドを使用してスタイリングもしているようです。コードの状態を考えると、これは (ほとんどの場合) そのように見えます。

cssメソッドを使用しないでください。

css動的なスタイルが絶対に必要な場合は、jQuery のメソッドを使用すると便利です。ほとんどの場合、ほとんどの人は動的なスタイルを必要としません。ほとんどの場合、ほとんどの人は動的なスタイルセットを必要とします。これらは、スタイルシートに残すべきクラスとして表現するのが最適です。HTML は.htmlファイルに属し、JS は.jsファイルに属し、CSS はファイルに属し.cssます。

したがって、本当に必要なのは、divアニメーションが終了したときにクラス (または複数) を変更することです。

そのすべてを、コードを書くことさえしません。すべてを結び付けるために、一般的に次のことを行います。

$('.some-span').on('click', function () {
    //when you click on a span
    var divIsVisible;
    //check whether a div is visible
    divIsVisible = $('.some-div').is(':visible');
    if (divIsVisible) {
        //if it is, fade out
        $('.some-div').fadeOut(function () {
            //when it's done fading out, add some classes
            $(this).addClass('is-hidden');
            //add other classes
        });
    } else {
        //else fade in
        $('.some-div').fadeIn(function () {
            //when it's done fading in, remove some classes
            $(this).removeClass('is-hidden');
            //remove other classes
        });
    }
});
于 2013-04-01T02:34:26.703 に答える
1

もちろん、CSS にすべてのスタイルを追加して適用するclassこともできます。#News

#News.closed {
    height: 45px;
    width: 200px;
    overflow: hidden;
}
#News.closed div {
    right: -10px;
}
#News.closed div label {
    font-size:12px;
    top: -14px;
}
}
#News.closed div label p {
    top: -15px;
    right: -20px;
}

デモ: http://jsfiddle.net/pavloschris/7G3Z4/10/

于 2013-03-31T15:28:38.813 に答える