/ / semantic-uiを使用してサブメニュースクロール可能なドロップダウンを作成する方法 - CSS、ドロップダウンメニュー、セマンティックUI

semantic-uiを使用してサブメニュースクロール可能なドロップダウンを作成するにはどうすればよいですか? - CSS、ドロップダウンメニュー、セマンティックUI

ガイドでは、標準的な方法を使用してそれを行うことはできないと言います: http://semantic-ui.com/modules/dropdown.html#scrolling

しかし、誰もそれを行うことができますか?

オーバーフローが表示から自動に変わると、サブメニュードロップダウンをスクロール可能にすると、ドロップダウンボタンをポイントする三角形が消えます。

これから:

ここに画像の説明を入力

これに行く:

ここに画像の説明を入力

何か案は?

回答:

回答№1は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>