[解決済み] Twitter Bootstrapのドロップダウンを非表示にする方法

質問

Bootstrapのドロップダウンのアイテムをクリックしても、ドロップダウンが閉じないという、困った事態になっています。ドロップダウンのアイテムをクリックすると Facebox ライトボックスが開くように設定してあるのですが、問題があります。

私が試したこと

項目がクリックされたときに、こんなことをやってみました。

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

これで非表示になりますが、その後なぜかまた開かなくなります。

見ての通り、ドロップダウンを閉じる必要があります。なぜなら、開いたままだと見栄えが悪いからです (主に z-index が Facebox モーダルボックスのオーバーレイより高いためです。

Bootstrap の組み込みモーダル ボックスを使用しない理由

なぜ私が格好いいモーダル ボックスを使わないのか不思議に思っているなら、それは に組み込まれている を使っていないのか不思議に思っているのであれば、それは

1. AJAX でコンテンツを読み込む方法がない。
2. モーダルのために毎回HTMLを入力しなければならない。Faceboxならシンプルにできる。 $.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. CSS3 アニメーションを使ってアニメーションしますが（とてもきれいに見えます）、CSS3 以外のブラウザではただ表示されるだけで、それほどきれいに見えません。Facebox では JavaScript を使ってフェードインするので、すべてのブラウザで機能します。

どのように解決するのですか？

これを試してみてください。

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

これもうまくいくかもしれません。

$('[data-toggle="dropdown"]').parent().removeClass('open');