如何使用语义-ui创建子菜单可滚动下拉菜单？

Question

指南中说使用标准方法无法做到这一点：http://semantic-ui.com/modules/dropdown.html#scrolling

但是，有人做到了吗？

当您使子菜单下拉菜单可滚动时，指向下拉按钮的三角形会消失，因为溢出从可见变为自动。

来自这里：

前往此：

有什么想法吗？

Answer 1

框架说不行你就不行。然而，总有work-arounds.

http://jsfiddle.net/cronq539/

注意：当您单击 "run" 时，以下代码段将不起作用，因为堆栈溢出不允许足够的演示中的高度以在视图中显示弹出窗口。转到上面的 jsfiddle link 看看它是否有效。

$('.ui.dropdown').popup({
  popup: $('.ui.popup'),
  on: 'click'
});

$('.ui.menu .item').on('click', function() {
  $('.ui.dropdown').click();
  alert(this.innerHTML);
});

.ui.popup.fitted {
  padding: 0px;
}
.ui.popup.fitted > .ui.menu {
  border: none;
}
.ui.menu.scrolling {
  max-height: 20.57142857rem;
  overflow-x: hidden;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script>
<div class="ui floating primary labeled icon top right pointing dropdown button">
  <i class="add user icon"></i>
  <span class="text">1</span>
</div>
<div class="ui fitted popup">
 <div class="ui vertical scrolling menu">
    <a class="item">Choice 1</a>
    <a class="item">Choice 2</a>
    <a class="item">Choice 3</a>
    <a class="item">Choice 4</a>
    <a class="item">Choice 5</a>
    <a class="item">Choice 6</a>
    <a class="item">Choice 7</a>
    <a class="item">Choice 8</a>
    <a class="item">Choice 9</a>
    <a class="item">Choice 10</a>
    <a class="item">Choice 11</a>
    <a class="item">Choice 12</a>
    <a class="item">Choice 13</a>
    <a class="item">Choice 14</a>
    <a class="item">Choice 15</a>
  </div>
</div>

如何使用语义-ui创建子菜单可滚动下拉菜单？

How to create a sub-menu scrollable dropdown using semantic-ui?

css

drop-down-menu

semantic-ui