8

これは私が持っているものです:

(defn view [cursor owner]
  (reify
    om/IDidMount
    (did-mount [_]
      (-> (js/$ ".dropdown-toggle")
          (.dropdown)))

    om/IRender
    (render [_]
      (dom/div #js {:className "dropdown"}
               (dom/button #js {:className "btn btn-default dropdown-toggle"
                                :type "button"
                                :id "dropdownMenu1"} "Dropdown" (dom/span #js {:className "caret"}))
               (dom/ul #js {:className "dropdown-menu"
                            :role "menu"
                            :ariaLabelledby "dropdownMenu1"}
                       (dom/li #js {:role "presentation"}
                               (dom/a #js {:role "menuitem"
                                           :tabIndex "-1"
                                           :href "#"} "Action"))
                       (dom/li #js {:role "presentation"}
                               (dom/a #js {:role "menuitem"
                                           :tabIndex "-1"
                                           :href "#"} "Another action")))))))

問題は、ドロップダウンが開かれると、ドロップダウンまたは他の場所をクリックしたときのように非表示にならないことです。また、キーストロークは機能しません。ここに重要な何かが欠けていると思いますが、それは何でしょうか? ブートストラップ 3.1.1 と jquery 1.11.0 を使用しています。

ありがとう。

4

2 に答える 2

4

もう 1 つのオプションは、私が作成したOm-Bootstrapライブラリを使用することです。この状態をすべて内部で処理するドロップダウン コンポーネントがあります。

ドロップダウンは次のようになります。

(:require [om-bootstrap.button :as b])

(b/toolbar
 {}
 (for [title ["Default" "Primary" "Success" "Info" "Warning" "Danger" "Link"]
       :let [style (.toLowerCase title)]]
   (b/dropdown {:bs-style style, :title title}
               (b/menu-item {:key 1} "Action")
               (b/menu-item {:key 2} "Another action")
               (b/menu-item {:key 3} "Something else here")
               (b/menu-item {:divider? true})
               (b/menu-item {:key 4} "Separated link"))))

http://om-bootstrap.herokuapp.comのドキュメント サイトには、これらすべてのコンポーネントの使用方法の例とコード スニペットがあります。

于 2014-12-10T16:46:17.970 に答える