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

Question

在指南中说它不可能通过使用标准方法来完成：http://semantic-ui.com/modules/dropdown.html#scrolling

但是，有没有人设法做到这一点？

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

从这：

去到这一点：

任何想法？

Answer 1

如果框架说你不能这样做，你不能这样做。但是，总是有解决方法。

http://jsfiddle.net/cronq539/

注意：当您单击按钮，因为堆栈溢出不允许足够的高度，在演示中显示，鉴于弹出下面的代码片段将无法正常工作。去上面的jsfiddle看看它的工作。

$('.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>