为啥侧边栏下拉菜单不起作用 bootstrap 3

Posted 2023-03-06

【中文标题】为啥侧边栏下拉菜单不起作用 bootstrap 3

【英文标题】：Why sidebar dropdown menu is not working bootstrap 3为什么侧边栏下拉菜单不起作用 bootstrap 3

【发布时间】：2014-02-10 18:29:42

【问题描述】：

我只是想创建一个简单的左侧边栏导航菜单。但是下拉菜单不起作用，尽管我已经添加了 js。我正在使用 bootstrap 3 的缩小版。

这是我的html代码

<div class="container">
        <!-- Sidebar Navigation -->
        <nav class="left-navbar navbar hidden-xs" role="navigation">
            <div id="profile">
                <div class="pic"></div>
                <div class="name">
                    <h2>Personal Site</h2>
                </div>
                <div class="tag">
                    <h3>A simple blogging site</h3>
                </div>
            </div>
            <div class="nav-menu">
                <ul class="nav-menu nav-pills nav-stacked">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toogle="dropdown" href="#">
                            Projects
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Project Blog</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

这是我用于侧边栏的自定义 CSS

    .left-navbar 
    width: 260px;
    height: 100%;
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    background: #333333;
    overflow-x: none;
    overflow-y: auto;
    color: white;
    -webkit-box-shadow: inset 0 0 5px 5px #222222;
    -moz-box-shadow: inset 0 0 5px 5px #222222;
    box-shadow: inset 0 0 5px 5px #222222;
    border-radius: 0;

#profile 
    padding: 25px 10px 10px 10px;
    text-align: center;
    position: relative;

#profile .pic 
    background-image: url('../img/profile.jpg');
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;

#profile .name h2 
    font-family: "Alegreya Sans", sans-serif;
    font-size: 40px;
    color: white;
    margin: 5px;

#profile .tag h3 
    font-family: "Buenard", serif;
    font-size: 15px;
    color: white;
    margin: 0;

.nav-menu 
    text-align: center;
    padding: 15px 0 25px 0;
    margin: 0;

.nav-menu ul li a 
    list-style: none;
    text-align: center;
    background: transparent;
    text-decoration: none;
    color: white;
    font-size: 15px;

你能帮帮我吗？

【问题讨论】：

页面中是否有任何javascript错误？

没有，但是我可以从 chrome 检查元素 event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 看到一条通知

这不是错误。你的 javascript 是干净的。

那我错过了什么？

尝试消除您的自定义 CSS，看看它是否有效。

【参考方案1】：

你在下拉触发链接中拼错了data-toggle，你写了data-toogle。将其更改为data-toggle 即可。

【讨论】：

糟糕。感谢您注意到它。工作。