jquery - 导航栏切换器点击功能不起作用

标签 jquery html css

大家好,我正在尝试制作一个内容垂直和水平居中的全屏导航栏,我实现了我的目标并轻松创建了所有内容,但是有一个问题。我编写了所有代码,但 jquery 代码似乎不工作,我检查了 chrome 的开发者工具,没有类添加到我想要它添加到的标签中。这是我的代码

<div class="toggle"><a><i class="fa fa-bars" aria-hidden="true"></i></a></div>
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Students</a></li>
            <li><a href="#">Contact</a></li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Other
                </a>
                <div class="dropdown-menu dropdown-menu-down" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="comingsoon.html">States</a>
                    <a class="dropdown-item" href="memes/memes.html">Memes</a>
                </div>
                </li>
        </ul>
    </div>

        <script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
.toggle {
    position: fixed;
    top: 40px;
    left: 40px;
    z-index: 2;
}
.toggle a {
    text-decoration: none;
    color: #262626;
    font-size: 24px;
    cursor: pointer;

}
.menu {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1;
    transition: .5s;
}
.menu ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.menu ul li {
    list-style: none;
}
.menu ul li a {
    padding: 10px;
    display: inline-block;
    font-family:;
    font-size: 2em;
    text-decoration: none;
    text-transform: uppercase;
    color: #262626;
    text-align: center;
}
.menu.active {
    left: 0;
    overflow: auto;
}
<script type="text-javascript">
            $(document).ready(function() {
                $('.toggle a').click(function() {
                   $('.menu').toggleClass('active');
                })
            })
</script>

最佳答案

您的代码没问题,您只需将“text-javascript”替换为“text/javascript”

关于jquery - 导航栏切换器点击功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59223418/

相关文章:

javascript - Jquery 年份选择器未按预期工作

html - 如何防止 Cufón 替换某个类下的元素中的文本?

html - 使用 HUGO 从公共(public)文件夹中渲染本地 index.html 的错误

html - Firefox 中不显示 Web 字体

复选框被选中时的 JQuery 事件

javascript - 单击/激活时如何使悬停属性保持不变?

javascript - 将 jQueryFileUpload 库与 require.js 一起使用

html - 防止嵌套的导航项进入下一行?

html - 表头没有收到 CSS(我认为)

jquery - 服务器端jquery