如何在此模板引导程序 4 中设置悬停下拉菜单

Posted 2023-02-16

【中文标题】如何在此模板引导程序 4 中设置悬停下拉菜单

【英文标题】：How to set dropdown on hover in this templete boostrap4

【发布时间】：2017-03-18 21:05:34

【问题描述】：

I Use this template, build with boostrap4

你能帮我在上面的模板中添加 Hover DropDown Menubar 吗？

我用一些代码更新 index.html 文件以显示下拉菜单栏，现在它已显示，但我需要在悬停时显示菜单。

这是代码：

<!-- Navigation -->
    <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="container">
            <a class="navbar-brand" href="/"><img src="img/km-logo.png" style="margin-bottom:5px;"   ></a>
            <div class="collapse navbar-collapse dropdown" id="navbarExample">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="dropdown">
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-item"><a href="#" style="text-decoration:none;">Action</a></li>
            <li class="dropdown-item"><a href="#" style="text-decoration:none;">Another action</a></li>
            <li class="dropdown-item"><a href="#" style="text-decoration:none;">Something else here</a></li>
          </ul>
        </li>
        </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                    </li>
                    <span class="text-primary"></span>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div> 
    </nav>

你能提出任何想法吗？我在 AboutUs 上临时应用菜单。

【参考方案1】：

您必须使用 javascript 或 jquery 在您想要下拉菜单的菜单项上执行 this.bind 事件。

【讨论】：

在 FB facebook.com/kmwebsoft 上联系我