問題タブ [toggleclass]

ボタンのクリックにバインドされたこのコード$(this).data('parentWidget').toggleClass(COLLAPSE_CLASS, 1000);は、COLLAPSE_CLASS のオンとオフを正常に切り替えています。ただし、効果はアニメーションではありません。

CSS では、元の要素に定義された高さ:85px があります。折りたたみクラスが追加された場合 .collapse { height:20px; 高さだけが変わります。

前述したように、これは高さを切り替えるという点で魅力的です。私が見ないのは、あらゆる種類のトランジション効果です。このような単純なトランジション効果が機能しない条件は何ですか? 言うまでもなく、この件に関するjQuery ドキュメントはまばらです。

わかりました、私はここでこのjQueryを使用しています：

わかりました。別の回答にアクセスする必要があるという返信がありました。これを試しましたが、これは最初の試行でのみ機能します。その後、ページ内のどこかをクリックするよりもトリガーをもう一度クリックするように表示すると、それは再び機能しません。表示されているときは常に非表示にできません。どうすればこれを修正できますか？

そのため、パネルが表示されたら、パネルの外側をクリックして、表示されるたびにパネルを非表示にできるようにしたいと思います。class = "trigger"オブジェクトをもう一度クリックするか、外側をクリックして、class = "panel"オブジェクトを表示および非表示にするために、class="trigger"オブジェクトのみをクリックできるようにしたいと思います。ページ上の任意の場所にあるclass="panel"オブジェクトの

これどうやってするの？

だから私がやろうとしているのは、jqueryを使用したYouTubeの親指アップ/親指ダウン投票システムのようなもので、ユーザーが投票すると、両方のdiv(画像は何でも構いません)がその特定のために利用できなくなることを意味します役職。

これまでのところ、そうするために、内部で toggleClass() が独自のクラスを変更する .click() を使用しています。DOM を調べるとクラスが変更されることがわかりますが、.click() がまだ機能しているのはなぜですか?新しいクラス？

そして私のhtml（php）

私が理解できないのは、クラスを切り替えた後でも、新しいクラス「votedDown」をクリックできるのはなぜですか?そのクラスには .click メソッドがないからです。

ありがとうございました

クラス .A とクラス .B があり、ボタンのクリックで切り替えたい場合、jQuery での適切な解決策は何ですか? 私はまだどのように動作するのか理解していませんtoggleClass()。

onclick=""それをイベントに入れるためのインラインソリューションはありますか?

クリックするとクラスを切り替えているdivがあり、ゴールドクラスから始まります

私がそのようにtoggelClassを呼び出す場合

残っているのは、ゴールドとグレーの両方のクラスを持つdivです（すでに適用されているため、ゴールドが削除されていると予想していました）。もう一度クリックすると、グレーが削除され、ゴールドが再度適用されます。

私がこれを行うと動作します

しかし、それは目的を打ち負かします

なぜこれが起こっているのかわからない

これに問題があると、なぜ正しく機能しないのか理解できません。

http://host.philmadelphia2.com/~clare/order/

上部にある2つの「注文...」リンクをクリックすると、divが切り替わります。1つのページがアクティブな場合、そのページのボタンをクリックしても効果はありません。非アクティブなページのボタンがクリックされたときにのみアクションが発生するはずです。

これがJSへのリンクです。

http://host.philmadelphia2.com/~clare/wp-content/themes/theme/js/pager.js

エフェクトにはjQueryとjQueryUIを使用しています。

ありがとう、ピート

:hover と :focus で背景が変わるはずのラジオ ボタンを囲むラベルがあります。

クラスを .radio-blur から .radio-focus に変更したい

私は持っている

しかし、うまくいきません...助けてください

みんな。この Web サイトや他の多くの Web サイトを検索して、Jquery コードで toggleClass 関数が機能しない理由を理解しました。いくつかの異なる説明を見つけましたが、エフェクトで実行したいことと一致しませんでした。

私は Jquery を初めて使用するので、Jquery の機能についてよくわかりません。これが私のJqueryコードです：

これが私のHTMLコードです。

ここで私が探している効果は非常に単純です。小さい div (btn-slide) をクリックすると、小さい div の上にある大きい div (パネル) が、完全に非表示になるまでブラウザ画面に表示されます。これが、slideToggle("slow" ） 関数。

次に、最後にやりたいことは、小さい div (btn-slide) の背景画像を変更することです。これが、私が toggleClass("smallbox") を使用している理由です。smallbox クラスは私の CSS ファイルにあり、下向きの矢印の背景画像があります。これは、大きな div (パネル) が隠れた場所に滑り込んだときに、小さな div (btn-slide) に表示したい画像です。

これを機能させる唯一の方法は、CSS ファイルに移動し、「smallbox」CSS クラスの background-image の最後に !important を配置することですが、この効果のための適切な Jquery テクニックを知りたいです。 .

注: 小さい div (btn-slide) をクリックして、クリックするたびに背景画像を適切な矢印に変更できるようにしたいと考えています。

この効果を達成するにはどうすればよいですか?

ありがとうございました！

更新：すべての返信に非常に感謝しています。わかりました。あなたのすべての返信で考えさせられたので、toggleClass 関数をもう一度見直したところ、コードが正しく機能するようになったと思います。これが私のCSSコードです。

さて、明らかに私の間違いは、#BUTTON に新しいクラスを追加する代わりに、指定された background-image を使用してクラス .GoUp を単独で追加していたことです。コードを変更したところ、すべてが正しく機能するようになりました。

迅速な回答をありがとうございました。

解決済み:

助けようとしたすべての人に感謝します

このコードを追加すると、うまくいきました：

http://jsfiddle.net/JKnjz/3/でどのように機能するかを確認できます

クリックして前の項目にクラスを追加し、再度クリックした後に削除するクラスを追加したいと考えています。しかし、他のすべてのアイテムをクリックして前のアイテムにクラスを追加すると、そのクラスも削除されます....

コードで説明しようとします。私は7つのdivを持っています

CSS:

Javascript:

たとえば、div 番号 2 をクリックすると、クラス「非表示」が div 番号に追加されます。1. div no. をクリックすると 2 その hide クラスを削除します。その部分は大丈夫です。

しかし、div noをクリックすると問題が発生します。2 div 番号に「hide」のクラスを追加します。1で、たとえばdiv no.6をクリックすると。クラス「隠す」はまだdivに残っています。いいえ1。

他のすべてのdivをクリックすると、クラス「非表示」が削除されます。

ここでは、jsfiddle.net/JKnjz/1 がどのように機能するかを確認できます。

明確な例を挙げていただければ幸いです:)

http://www.presentbladet.se (未完成)に Web サイトがあります。「テスト製品」にカーソルを合わせると、虫めがねが表示されます。ここまでは順調ですね。

フェードイン - ただし、CSS でホバーしたままにする

フェードイン効果でトランジションをスムーズにしたい。私はまだ CSS で可能な限り保持し、jQuery/jQuery UI で遅延/フェードを作成したいと考えています。

私は自分のサイトでこのコードを使用しています：

ディレイ部分が効かない

それはほとんど動作します。クラスの「ホバー」を切り替えますが、遅延部分はまったく機能しません。移行は、ゆっくりフェードインするのではなく、瞬時に行われます。