1

我想在单击字体很棒的 V 形按钮时显示/隐藏表格。

以下代码来自http://jsfiddle.net/z0y0hp8o/6/。我想做同样的事情，但是在使用 java 互操作的 clojurescript 中。

(document).on('click', '.panel-heading span.clickable', function(e){
    var $this = $(this);
    if(!$this.hasClass('panel-collapsed')) {
        $this.parents('.panel').find('.specialCollapse').slideUp();
        $this.addClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    } else {
        $this.parents('.panel').find('.specialCollapse').slideDown();
        $this.removeClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    }                                                                })

这是我在 clojurescript 中的草稿尝试。

(if (-> e -target -value
 (.getElementsByClassName js/document "panel-collapsed"))
  (do
    (.slideUp js/document
              (.find js/document ".specialCollapse"
                     (.parentElements js/document ".panel")))
    (.addClass "panel-collapsed")
    (.addClass "fas fa-chevron-down"
               (.removeClass "fas fa-chevron-up"
                             (.find "i"))))
  (do
    (.slideDown js/document
              (.find js/document ".specialCollapse"
                     (.parentElements js/document ".panel")))
    (.removeClass "panel-collapsed")
    (.addClass "fas fa-chevron-up"
               (.removeClass "fas fa-chevron-down"
                             (.find "i")))))
4

2 回答 2

2

我想你真的很亲近。

我尝试了以下方法：我用 Figwheel 创建了一个新项目，像这样使用 Leiningen：lein new figwheel jq-inter

在新jq-inter文件夹中，我对文件进行了编辑，resources/public/index.html以使 JSFiddle 中呈现的 HTML 文件的内容大致相同。基本上我复制了http://fiddle.jshell.net/z0y0hp8o/6/show/的源代码，删除了第 64 行和第 84 行之间的原生 JS 版本的代码，并删除了底部用于消息传递的 JS 块只有 JSFiddle 自己需要的文件。

在结束</body>标记之前，我在 JS 文件中添加了将从 ClojureScript 编译的内容：

<script src="js/compiled/jq_inter.js" type="text/javascript"></script>

现在我编辑了 ClojureScript 文件src/jq_inter/core.cljs，使它看起来像这样：

(ns jq-inter.core
    (:require ))

(enable-console-print!)
(println "Loaded!")

(defonce $ js/$)

(-> ($ js/document)
    (.on "click" ".panel-heading span.clickable"
         (fn [e]
           (let [$this ($ (-> e .-target))]
             ;; (js/console.log $this) ;; To check using the inspector
             (if-not (.hasClass $this "panel-collapsed")
               (do
                 (-> $this (.parents ".panel") (.find ".specialCollapse") (.slideUp))
                 (-> $this (.addClass "panel-collapsed"))
                 (-> $this (.removeClass "glyphicon-chevron-up") (.addClass "glyphicon-chevron-down")))
               (do
                 (-> $this (.parents ".panel") (.find ".specialCollapse") (.slideDown))
                 (-> $this (.removeClass "panel-collapsed"))
                 (-> $this (.removeClass "glyphicon-chevron-down") (.addClass "glyphicon-chevron-up")))
               )))))


(defn on-js-reload []
  ;; optionally touch your app-state to force rerendering depending on
  ;; your application
  ;; (swap! app-state update-in [:__figwheel_counter] inc)
)

您可以使用lein figwheel. 它将下载一堆依赖项并在后台启动编译器，然后从resources文件夹中提供文件。我花了几次尝试让 V 形图标正常工作，最后我认为点击的目标甚至是<i>标签本身，而不是<span>出于某种原因。YMMV。

于 2019-06-21T06:36:18.857 回答
2

找到了对我有用的东西。我已经在我的项目中安装了 Bulma，并且能够使用Bulma 下拉功能，以及derHowie提供的以下功能。

(defn toggle-class [id toggled-class]
 (let [el-classList (.-classList (.getElementById js/document id))]
   (if (.contains el-classList toggled-class)
     (.remove el-classList toggled-class)
     (.add el-classList toggled-class))))

像实施

     [:div {:class "dropdown-trigger"}
      [:button {:class "button" :aria-haspopup "true" :aria-controls "drop-down-menu"
                :on-click #(toggle-class "table-dropdown" "is-active")}
       [:span "Table"]
       [:span {:class "icon is-small"}
        [:i {:class "fas fa-angle-down" :aria-hidden "true"}]]]]
     [:div {:class "dropdown-menu" :id "dropdown-menu" :role "menu"}
      [:div.dropdown-content
       [:div {:class "dropdown-item"}
        [table-to-be-displayed]]]]]

几乎可以调用该函数toggle-class并将要修改的元素的 id 和“is-active”类发送给它，如果该类已经应用于元素，它会将其关闭，然后返回再次开启。@Dennis 也提供了一种很好的方式来切换 V 形上/下图标。

于 2019-06-25T16:59:19.903 回答