2011-01-21 10 views
3

私はできる限りハードにしようとしていましたが、私はこれについて私の頭を越えていると思う、私はjQueryの知識を持っていないあなたが見るように、私はかなり新しいです。ボタンはリスト内の要素をアクティブ/非アクティブにします(複雑なケース)

これは、複雑な場合があり得るので、私は私ができる限り良いを説明しようとします:

私が項目のリストを持っている、のLIは、アコーディオンにタイトルでグループ化されたので、あなたが展開する/折りたたみますそのセクションの対応するリストが表示されます。

各セクションには、リストが含まれており、リストの一番下にある2つのボタンです:クリアを選択し、すべてを選択します。

ページに入ると、最初のアコーディオンセクションが展開され、リストの内側にリストが表示され、リストの一番下には[選択を解除]ボタンと[すべて選択]ボタンが表示されます。 Clear Selectedボタンは表示されますが、「非アクティブ」です。 「非アクティブ」エフェクトを作成するには、私はちょうどの不透明度を使用しました:.5; CSSの

これまでのところ、「すべて選択」ボタンでクラスを変更することができましたが、残りのケースや動作は私にとっては複雑すぎます。

リストとボタンの間のやり取りは、私が助けてくれるものです。

私が構築しているのは、アコーディオン内の要素/オプションをクリックして結果をフィルタリングできる結果システムです。

ここにはDEMOがあります。

これについてのお手伝いがありますようお願い申し上げます。

おかげで、

EDIT--

必要な機能を知るためにDEMOのJavaScriptのセクションのコメントを読んでください。

+0

「すべて選択」ボタンを押したときに、何をしたいですか?近くのリスト要素に追加するクラス? –

+0

はい、クラスが追加されました。私はすでにこのクラスを作成しました。それは ".active"という名前です。デモのコメントからわかるように、私が必要とするのは、 'Select All'ボタンを初めて押すと、そのリストのすべての要素に「.active」というクラスが追加され、再度クラスを削除してください。リスト内の要素がすでに選択されていることがあるので、ユーザーが[すべて選択]ボタンをクリックすると、残りの要素が選択されることに注意してください。それは理にかなっていますか? –

+1

私は技術的に**私の頭の上にあるので私はあなたを助けることができない、私は質問が非常にうまく置かれていると思うので、私はupvotedしたが、あなた自身のために、完全な答え(それは間違っているかもしれないかもしれませんが)が広すぎるかもしれないのでもう少しですが、それは私が残した印象です。がんばろう! – Trufa

答えて

1

私はあなたのほとんどがうまくいっていると思います。私のコードを見て、それがあなたが望むものかどうかを見てください。 http://www.jsfiddle.net/lmcculley/ujuH6/10/ うまくいきますように!

+0

コンテキストはすべてです。 – Lance

+0

@ Lance 1つの項目を選択して[すべて選択]をクリックすると、選択範囲が反転します。それはバグか正しいのでしょうか? – Marnix

+0

私は彼のjsfiddleからのコメントで印象に残っていました。 – Lance

関連する問題