带有ui复选框的语义UI弹出窗口

Question

我试图在一个ui复选框onChecked事件上触发一个语义ui弹出窗口，但它不能按照预期的方式工作。我显然是Semantic UI的新手。我写的代码显示了悬停时的弹出窗口，但我认为onChecked事件会覆盖悬停状态。弹出窗口现在在onChecked事件后出现悬停。任何想法如何让这个工作？

我正在使用带有Semantic UI JS和CSS版本的JQuery：

https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js

这是我的代码

HTML

<!-- UI Checkbox -->
<div class="ui checkbox">
  <input type="checkbox" id="popUpCheckBox">
  <label>PopUp Checkbox</label>
</div>

<!-- PopUp DIV -->
<div class="ui flowing popup">
  <div class="ui grid">
    <div class="row">
      <div class="column">
        Column 1
      </div>
      <div class="column">
        Column 2
      </div>
      <div class="column">
        Column 3
      </div>
      <div class="column">
        Column 4
      </div>
    </div>
  </div>
</div>

JQuery的

$(".ui.checkbox").checkbox({
  onChecked() {
    $(".checkbox").popup({
      popup: $(".flowing.popup"),
      position: "bottom center"
    });
  },
  onUnchecked() {
    $(".flowing.popup").remove();
  }
});

Answer 1

有一个名为on的弹出选项，您可以设置为"manual"以防止弹出窗口在悬停时显示：

$(".ui.checkbox").checkbox({
  onChecked() {
    $(".checkbox").popup({
      popup: $(".flowing.popup"),
      position: "bottom center",
      on: "manual"  //the default is "hover"
    });
    $(".checkbox").popup("show");  //show the popup manually
  },
  onUnchecked() {
    $(".flowing.popup").remove();
  }
});

https://next.plnkr.co/edit/0GwhfmiXbYoYxue6?open=lib%2Fscript.js