bootstrap(下拉菜单与滚动监听)

最新推荐文章于 2023-07-23 12:13:17 发布

小鱼儿_zhang

最新推荐文章于 2023-07-23 12:13:17 发布

阅读量5.5k

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_20261343/article/details/47299013

版权

本文详细介绍了如何在Bootstrap中实现下拉菜单及其滚动监听功能。内容包括下拉菜单的LESS版本、JavaScript触发方法，以及滚动监控器的四步实现过程：加载插件、设计导航条和下拉菜单、创建监控对象并定义样式，以及通过data属性和JavaScript方法触发滚动监控。此外，还提到了在DOM变化时刷新滚动监控的方法。

摘要由CSDN通过智能技术生成

下拉菜单（Dropdown）
☑ LESS版本：对应的源文件dropdowns.less
这里写图片描述

<h3>示例1</h3>
<div class="navbar navbar-default" id="navmenu">
    <a href="##" class="navbar-brand">W3cplus</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
                <li role="presentation"><a href="##">CSS3</a></li>
                <li role="presentation"><a href="##">HTML5</a></li>
                <li role="presentation"><a href="##">Sass</a></li>
            </ul>
        </li>
        <li><a href="##">前端论坛</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>

<h3>示例2</h3>
<ul class="nav nav-pills">
    <li class="dropdown">
        <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
            <li role="presentation"><a href="##">CSS3</a></li>
            <li role="presentation"><a href="##">HTML5</a></li>
            <li role="presentation"><a href="##">Sass</a></li>
        </ul>
    </li>
    <li class="active"><a href="##">前端论坛</a></li>
    <li><a href=