ここ数日、頭を悩ませて Google を検索してきましたが、これに対する受け入れられる解決策が見つかりませんでした。Twitter Bootstrapを使用して新しいサイトをコーディングしています。Nav クラスと組み込みのドロップダウン機能を使用していますが、標準の単一列のドロップダウンではなく、複数列のドロップダウンが必要です (ドロップダウンに表示したい多くのカテゴリとサブカテゴリがあります)。ドロップダウンが非常に長くなったりスクロールしたりすることなく、すべてを画面に表示します)。
(a にある) データを動的に列化するために、jquery.columnizer.js<ul>
を使用して います。
問題は次のとおりです。ドロップダウンが ( 経由でdisplay:none
) 非表示になっているため、jQuery はドロップダウン コンテナーのサイズを取得できません。ディメンションを取得できないため、カラムナイザーはカラム化できません。
最初のクリックでは機能しないナビゲーション項目のクリック イベントに columnize 関数をアタッチしようとしました (メニューのオンとオフを切り替えると、後続のトグルで機能します)。
私は Bootstrap Javascript を変更したくありません。また、コラムライザーには機能するものは何もないようです。$('.myNavElements').columnize();
では、 Bootstrap ドロップダウンが表示された後に、どのように列化関数 (つまり) をトリガーすることができますか?
編集:
受け入れられた回答に基づいて、うまくいった解決策はこれでした:
$(".dropdown").addClass("open");
$('.dropdown-menu').columnize();
$('.dropdown').removeClass("open");