关闭语义中的 ui 下拉菜单

Question

我需要在将鼠标悬停在 ui 下拉菜单上时关闭它。现在，ui 下拉列表只是可见的，不会在点击或单击时显示或隐藏。

以下是片段：

<div ng-show="user" class="ui pointing dropdown link item">
    <span class="text">Reg</span>
    <i  class="dropdown icon"></i>
    <div class="menu transition visible">
      <a class="item" href="/xyz">
        Schools
      </a>
      <div class="divider"></div>
      <a class="item" href="/xyz2">
       Admissions
      </a>
    </div>
  </div>

UI 下拉菜单初始化如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/dropdown.js" type="text/javascript"></script>

<script type="text/javascript">

$('.ui.dropdown')
.dropdown();
</script>

这里需要做哪些改动？

Answer 1

你只需要添加 css class simple 悬停。

<div ng-show="user" class="ui pointing simple dropdown link item">
    <span class="text">Reg</span>
    <i  class="dropdown icon"></i>
    <div class="menu transition visible">
      <a class="item" href="/xyz">
        Schools
      </a>
      <div class="divider"></div>
      <a class="item" href="/xyz2">
       Admissions
      </a>
    </div>
  </div>

而在JS文件中，你需要像下面这样初始化

<script>
    $(document).ready(function () {
        $('.ui.dropdown').dropdown();
    })
</script>

关闭语义中的 ui 下拉菜单

Dismiss a ui dropdown in semantic

html

css

semantic-ui

semantics