jquery - 如何使 Bootstrap 下拉菜单的一部分可滚动

标签 jquery html css

我正在尝试使用 Bootstrapdrop 下拉菜单创建一个 friend 请求菜单,我想以这样的方式制作菜单:如果好友请求超过 3 个,则可以通过溢出滚动,而 li 包含“您有2 个请求”和“检查所有请求”在滚动时保持固定。由于下拉菜单似乎不容易自定义,我该如何实现这一点?

enter image description here

最佳答案

解决了答案......为了使下拉菜单的一部分可滚动,您必须在

  • 标签中创建可滚动内容并应用 css(对其进行溢出样式)。

    .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/

    相关文章:

    CSS转换在Safari中不起作用

    html - Div 没有正确响应

    javascript - jQ 对多个独立事件的条件处理

    javascript - 为什么这个 "vertical-align:bottom"的div的子元素在淡出之前移动到页面中间?

    javascript - 如何在不使用 margin 属性的情况下将内容居中放置在 div 中

    css - 为什么这个元素在移动版本中没有出现在中心?html 或 css 有什么问题?

    html - 从 Firefox 加载外部 .CSS 文件

    css - 如何在我的 Li ul 上添加背景

    jquery - 如何在点击事件后对 jquery ui 中的切换按钮进行计数

    javascript - 创建/附加包含包含引号的 blob 文本的元素