我正在尝试使用 Bootstrapdrop 下拉菜单创建一个 friend 请求菜单,我想以这样的方式制作菜单:如果好友请求超过 3 个,则可以通过溢出滚动,而 li 包含“您有2 个请求”和“检查所有请求”在滚动时保持固定。由于下拉菜单似乎不容易自定义,我该如何实现这一点?
最佳答案
解决了答案......为了使下拉菜单的一部分可滚动,您必须在
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.dropdown-menu > li{
}
.dropdown-menu > li > ul{
padding-left: 10px;
list-style-type: none;
height: 100px;
overflow-y:auto;
overflow-x:hidden;
left:0px;
display: block;
}
.dropdown-menu > li > ul > li{
left:0px;
display: block;
}
ul {
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>My answer</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Friends List
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">you have 10 requests </a></li>
<li>
<ul>
<li><a>Friendx</a></li>
<li><a href="#">Friend1</a></li>
<li><a href="#">Friend2</a></li>
<li><a href="#">Friend3</a></li>
<li><a href="#">Friend4</a></li>
<li><a href="#">Friend6</a></li>
<li><a href="#">Friend7</a></li>
<li><a href="#">Friend8</a></li>
<li><a href="#">Friend9</a></li>
</ul>
</li>
<li><a href="#">read more </a></li>
</ul>
</div>
</div>
</body>
</html>
关于jquery - 如何使 Bootstrap 下拉菜单的一部分可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46540815/