Question

当我单击一个字体超赞的V形按钮时，我想显示/隐藏一个表格。

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

(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

我认为你真的很亲近。

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

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

在结束</body>标记之前，我在JS文件中添加了将从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文件夹提供文件。我花了一些时间才能使人字形图标正常工作，最终我认为，由于某种原因，单击的目标甚至是<i>标签本身而不是<span>。 YMMV。

Answer 2

找到了对我有用的东西。我已经在项目中安装了Bulma，并且能够使用Bulma dropdown feature中的以下功能来使用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也提供了一种很好的方式来切换人字形图标。

如何在ClojureScript中隐藏/显示表格

2 个答案: