首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Jquery .slideToggle()没有在导航栏上工作?

Jquery .slideToggle()没有在导航栏上工作?
EN

Stack Overflow用户
提问于 2017-04-24 22:50:26
回答 1查看 109关注 0票数 0

我一直在跟踪各种在线教程/指南,比如如何创建一个响应性的标题,并且我最终能够完成它,除非我无法打开它。每当我点击足吧,绝对不会发生任何事情.

HTML:

代码语言:javascript
运行
复制
<header id="header" class="main-header">
        <div class="container">
            <h1 class="header-logo navigation-hover"><a href="/">Logo</a></h1>
            <a href="#" id="icon linksBtn" class="navigation-hover icon linksBtn"><i class="iconbars fa fa-bars" aria-hidden="true"></i></a>
            <nav class="nav" id="nav">
                <ul class="links" id="links">
                    <li class="active navigation-hover">
                        <a href="#">Home</a>
                    </li>
                    <li class="navigation-hover">
                        <a href="">About</a>
                    </li>
                    <li class="navigation-hover">
                        <a href="#">Services</a>
                    </li>
                    <li class="last navigation-hover">
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

CSS (如果很长的话很抱歉):

代码语言:javascript
运行
复制
* {
margin: 0;
padding: 0;
}

#header {
top: 0;
z-index: 2;
position: fixed;
width: 100%;
height: 50px;
background: #f2f2f2;
color: #535a60;
border-bottom: 2px solid #999;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.header-logo {
padding: 0px 5px;
line-height: 50px;
margin: 0px;
font-size: 1.2em;
float: left;
}

.header-logo a {
font-family: "Lato", sans-serif;
text-decoration: none;
color: #535a60;
}

#nav {
float: right;
right: 0;
height: 50px;
}

#nav ul {
width: 100%;
display: inline-block;
top: 0;
margin: 0;
padding: 0;
}

#nav ul li {
float: left;
list-style: none;
}

#nav ul li a {
font-family: "Roboto", sans-serif;
line-height: 50px;
text-transform: uppercase;
height: 50px;
display: inline-block;
color: #535a60;
text-decoration: none;
padding: 0 20px;
font-size: 15px;
}

Jquery:

代码语言:javascript
运行
复制
$(function () {        
    var pagewidth = $(window).width(),
        links = $("#links"),
        linksBtn = $("#linksBtn"),
        icon = $("#linksBtn .iconbars");

    if (pagewidth < 700) {
        links.hide();
        icon.addClass("fa-bars");
    }

    $("#linksBtn .iconbars").click(function(e) {
        $("#links").slideToggle();
        icon.toggleClass("fa-bars");
        icon.toggleClass("fa-times");
    });

    $(window).on('resize', function () {
        if ($(this).width() > 700) {
            links.show();
            icon.addClass("fa-times");
            icon.removeClass("fa-bars");
        } else {
            links.hide();
            icon.addClass("fa-bars");
            icon.removeClass("fa-times");
        }
    })
});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-24 23:05:46

元素上只能有一个id。

尝试:

代码语言:javascript
运行
复制
<a href="#" id="linksBtn" class="navigation-hover icon linksBtn"><i class="iconbars fa fa-bars" aria-hidden="true"></i></a>

$("#linksBtn").click(function() {
    $("#links").slideToggle();
    icon.toggleClass("fa-bars");
    icon.toggleClass("fa-times");
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43598902

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档