column-count: 3リストを 3 つの列に分割し、各リスト項目にスタイルを適用してdisplay: inline-block、リスト項目の子を同じ列に保持するために使用しています。子は と で非表示にmax-heightなりoverflow: hiddenます。
設定してクリック時に子を展開して表示したいのですmax-height: noneが、 column-count はすべての列のバランスを動的に均等にしようとするため、リストの順序が変更されます。それが列数の目的であることを理解しています。
似たようなものを使用したいのですがcolumn-count: 3、ページの読み込み後に「ロック」して、子を展開するときに並べ替えられないようにします。項目を 3 つの異なるリストに分割しなくても、それは可能でしょうか? 唯一の要件は、IE11 で動作することです。
これは、問題を説明するための私の codepen デモです。