gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 08:41:33 24 4
gpt4 key购买 nike

我正在尝试使用 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/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com