如何在 ClojureScript 中 hide/show a table

Question

我想 show/hide 一个 table 当一个字体很棒的人字形按钮被点击时。

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

(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")))))

Answer 1

我觉得你们真的很亲密。

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

在新的 jq-inter 文件夹中，我编辑了 resources/public/index.html 中的文件，使 more/less 具有与 JSFiddle 中呈现的 HTML 文件相同的内容。基本上，我复制了 http://fiddle.jshell.net/z0y0hp8o/6/show/ 的源代码，删除了第 64 行和第 84 行之间代码的本机 JS 版本，并删除了文件底部用于消息传递的 JS 块，该块仅 JSFiddle 本身需要。

就在结束 </body> 标记之前，我在 JS 文件中添加了以下行：what will be compiled from ClojureScript:

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

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

(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.

Answer 2

找到了对我有用的东西。我已经在我的项目中安装了 Bulma，并且能够使用 Bulma dropdown feature, with the following function from 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" class 发送给它，如果 class 已经应用于一个元素，它会关闭它，然后再重新打开。 @Dennis 也提供了一种切换人字形 up/down 图标的好方法。

如何在 ClojureScript 中 hide/show a table

How to hide/show a table in ClojureScript

clojurescript

clojurescript-javascript-interop