web-dev-qa-db-ja.com

クリックして公開するリンクで三角形のアイコン(下/上)を切り替える正しい使用方法は何ですか?

ユーザーがボタンを切り替えてdivを表示または非表示にできるUIに取り組んでいます。 1回目のクリックで、divがボタンの下に表示され、スライドダウン効果が表示されます。 2回目のクリックで、divが上にスライドして非表示になります。

現在、ボタンがスライドダウンショーをトリガーするときに下向きの三角形のアイコンと、ボタンがスライドアップを非表示にするときに上向きの三角形のアイコンの間でボタンアイコンを切り替えていますか? (注:ホバー時のアイコンに変更はありません)。

これは使用するのに適した方法ですか、それとももっと適切な実装が必要ですか?

7
Adam Ruf

ボタンで番組非表示機能を実行しているWebサイトを見たことはありませんが、アイコンを含める場合は、アンカー(リンク)タグを使用して表示/非表示イベントを実行するのがより一般的な規則であると思います。

また、規約は、コンテンツが下向きの矢印を持つように展開されている場合と、コンテンツが上向きではなく左向きの矢印を持つように縮小されている場合のように見えます。どちらの場合も、アイコンはテキストの左側にあります。

このコンセプトを見たところ

この慣習はデスクトップの世界に由来し、MacだけでなくLinuxオペレーティングシステムの多くでも見られると私は信じています。以下に添付の画像。 Windowsの世界では、代わりにプラス(+)およびマイナス(-)記号を使用しました。

enter image description hereenter image description here

6
JeffH

これらのケースで三角形が使用されている場合、三角形の方向は、アクションではなくノードの状態を示します。したがって、展開された要素には下向きの矢印があり、折りたたまれた要素には右向きの矢印があります。

理由は、コンテンツの(下向きの)展開は、三角形の時計回りの90度の動きにネイティブに関連付けられている(コンテンツと三角形の両方のアニメーションを考えると、ここで役立ちます)のに対し、上向きの折りたたみは、ネイティブに90度の反-三角形の時計回りの動き。

2
Izhaki

アコーディオンコントロールに似たものを記述しているように思えます。もしそうなら、参照のために jQuery UIアコーディオンコントロール を使用するのはどうですか?展開/折りたたみボタンはコンテンツの幅全体に広がり、折りたたまれたセクションには右矢印、展開されたセクションには下矢印が表示されます。

0
Michael