web-dev-qa-db-ja.com

ネストされたアコーディオンは、子で作業するときに親を閉じるべきではありません

私たちのアコーディオンは現在次のように動作します:

アコーディオン内のアイテムをクリックすると、その下にコンテンツがある場合はアコーディオンが開き、その横の画面が開きます。開いているアコーディオンアイテムをクリックすると、閉じます。各レベルをクリックすると、より深いレベルに移動できます。同じレベルの別のアイテムをクリックすると、開いているアイテムがある場合、他のアイテムが閉じます。 (つまり、root parent 2または3をクリックすると、root parent 1が閉じます)

このcodePenをチェックして、アコーディオンの現在の動作を確認してください

Example accordion

問題:

例:child 3の画面で作業していて、しばらくparent 1の画面に戻りたい場合、アコーディオンを閉じます。そのため、parent 1に戻りたい場合はchild 3を再度開く必要があります。悪いUXのように。

私たちのチームが提案した解決策:

  • 開いているアコーディオンをクリックして閉じることはできず、同じレベルまたはより高いレベルの他の何かをクリックすることによってのみ閉じることができます。

  • シェブロンをクリックしてのみアコーディオンを開閉します。

  • シングルクリックで画面を開き、ダブルクリックでアコーディオンを開きます。

2
Martijn Vissers

あなたの説明から、サイドバーのアコーディオンを使用してデスクトップ上の画面間を移動しているようです。その場合は、ファイルエクスプローラーと同じ動作を採用します。-要素をクリックすると、要素(メインアクション)が表示されますが、自動的に開いたり閉じたりすることはできません。 -親カテゴリを開くまたは閉じるには、別のタイプのアクションが必要です(ダブルクリック、またはプラス/マイナスアイコンのクリック、またはシェブロン)。 (これはWindowsファイルエクスプローラーの動作であり、おそらく最良ではありませんが、少なくともすべてのWindowsユーザーによく知られています)

1
celinelenoble

私があなたが説明した元のアプローチ(codepen上のもの)に大きな間違いはないと思います。アコーディオンは期待通りに動いていると思います。提案された3つの解決策は、アコーディオンブロック内の2つの異なるアクションを意味します。これは、一般的なパターンのようには見えません(ユーザーにとって理解しにくい)。

0
Warren Payne