Question

我正在尝试使用幻灯片动画从左侧制作菜单。但它没有加载动画，它没有关闭或打开，它保持正常菜单。这是我的代码，如下

的javascript
-CSS
-html：

＆＃13;

$(document).ready(function(){
    $(".fa-times").click(function(){
        $(".sidebar-menu").addClass("hide-menu");
        $(".toggle-menu").addClass("opacity-one");
    });

    $(".fa-times").click(function(){
        $(".sidebar-menu").removeClass("hide-menu");
        $(".toggle-menu").removeClass("opacity-one");
    });
})

＆＃13;

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

.fa-times{
	right: 10px;
	top: 10px;
	opacity: 0.7;
	cursor: pointer;
	position: absolute;
	color: white;
	transition: all 0.2s ease-in-out;
}

.fa-times:hover{
	opacity: 1;
}

.sidebar-menu{
	position: fixed;
	width: 250px;
	margin-left: 0px;
	overflow: hidden;
	height: 100vh;
	max-height: 100vh;
	background-color: rgba(17,17,17,0.9);
	opacity: 0.9;
	transition: all 0.3s ease-in-out;
}

.hide-menu{
	margin-left: -250px;
	transition: all 0.3s ease-in-out;
}

.toggle-menu{
	position: fixed;
	padding: 15px 20px 15px 15px;
	margin-top: 70px;
	color: white;
	cursor: pointer;
	background-color: #648B79;
	opacity: 0;
	z-index: 10000;
	font-size: 2em; 
	transition: all 0.2s ease-in-out;
}

.opacity-one{
	opacity: 1;
	transition: all 0.2s ease-in-out;
}

.toggle-menu:hover{
	background-color: #FE4365;
	transition: all 0.2s ease-in-out;
}

.boxed-item{
	font-family: 'Open Sans';
	font-weight: 200;
	padding: 10px 20px;
	display: inline-block;
	border: solid 2px white;
	box-sizing: border-box;
	font-size: 29px;
	color: white;
	text-align: center;
	margin-top: 70px;
}

.logo-bold{
	font-weight: 800;
}

.logo-title{
	color: white;
	font-family: 'Open Sans';
	font-weight: 200;
	font-size: 20px;
	text-align: center;
	padding: 5px 0;
}

.menu-close{
	color: #D8D8D8;
	position: absolute;
	right: 8px;
	opacity: 0.7;
	top: 6px;
	font-size: 1.1em;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.menu-close:hover{
	color: #FE4365;
	opacity: 1;
	transition: all 0.2s ease-in-out;
}

.navigation-section{
	margin: 20px 0;
	display: block;
	width: 200px;
	margin-left: 25px;
}

.navigation-item{
	font-weight: 200;
	font-family: 'Open Sans';
	color: white;
	padding: 12px 0px;
	box-sizing: border-box; 
	font-size: 14px;
	color: #D8D8D8;
	border-bottom: solid 1px #D8D8D8;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.navigation-item:hover{
	color: white;
	transition: all 0.3s ease-in-out;
}


.boxed-item-smaller{
	font-size: 12px;
	color: #D8D8D8;
	width: 200px;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	border-width: 1px;
	margin: 0 0 20px 0;
}

.boxed-item-smaller:hover{
	background-color: white;
	color: #111;
	transition: all 0.3s ease-in-out;
}

.hide-menu{
    margin-left: -250px;
}

.opacity-one{
    opacity: 1;
    transform: all 0.3s ease-in-out;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <!--Stylesheets-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        
        <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <!-- Scripts-->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="menu.js"></script>
        <title>Coffee note </title>
    </head>
    <body>
        <i class="fa fa-bars toggle-menu"></i>

        <div class="sidebar-menu">
            <i class="fa fa-times"></i>
            <center>
                <a></a><h1 class="boxed-item">Coffe <span class="logo-bold">. note</span></h1>
                </a><h2 class="logo-title">Manage Your Time</h2>
            </center>
    
            <ul class="navigation-section">
                <li class="navigation-item" id="home">
                    HOME
                </li>
                <li class="navigation-item" id="dashboard">
                    DASHBOARD
                </li>
                <li class="navigation-item" id="weekly_todo">
                    WEEKLY TO-DO
                </li>
                <li class="navigation-item" id="skills">
                    SKILLS
                </li>
                <li class="navigation-item" id="interests">
                    INTERESTS
                </li>
                <li class="navigation-item" id="portfolio">
                    PORTFOLIO
                </li>
                <li class="navigation-item" id="contact">
                    CONTACT
                </li>
            </ul>
    
            <center>
                <a href="#"><h1 class="boxed-item boxed-item-smaller signup">
                <i class="fa fa-user"></i>
                    SIGN UP
                </h1></a>
            </center>
        </div><!-- End of sidebar -->
    
        <script src="close_menu.js"></script>
        <script src="menu.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    
    </body>
</html>

＆＃13;

我无法确定问题到底在哪里以及原因。在代码中可能会有一些令人困惑的事情，因为我尝试了许多解决方案和＃34;以及修复它的事情，但没有任何结果。如果有人告诉我我的错误在哪里以及如何解决它，我会很高兴。谢谢你的时间！

Answer 1

您添加了两个点击事件，一个添加了一个类，另一个再次删除它。所以点击不会改变任何东西。这是你应该怎么做的：

(…)

Answer 2

我为你修好了代码您也可以使用toggleClass，因为您已使用jquery代替addClass和removeClass

$(".fa-bars").on("click",function(){
        $(".sidebar-menu").toggleClass("hide-menu");
        $(".toggle-menu").toggleClass("opacity-one");
    });

    $(".fa-times").on("click",function(){
        $(".sidebar-menu").toggleClass("hide-menu");
        $(".toggle-menu").toggleClass("opacity-one");
    });

这是代码笔链接https://codepen.io/anon/pen/jzVeXP

Navbar slideout - 不加载动画

2 个答案: