Question

我正在尝试在ui复选框onChecked事件上触发语义ui弹出窗口，但它无法正常运行。我显然是语义UI的新手。我编写的代码在悬停时显示了一个弹出窗口，但我认为onChecked事件将覆盖悬停状态。现在，在onChecked事件之后，悬停窗口上会出现弹出窗口。有任何想法如何使它正常工作吗？

我将JQuery与语义UI JS和CSS版本一起使用：

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

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

1 个答案: