如何使用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>