javascript - Jquery 滑动菜单切换

Question

我正在尝试使用 jquery 构建滑入/滑出导航菜单，但我遇到了问题。如果我单击“fa-bars”图标，仅此一点，一切都会顺利进行。但是，当我单击“fa-times”图标关闭导航菜单(我希望它这样做)时，它会按预期工作，但“fa-bars”图标不再可单击以重新打开菜单。我知道它与我的 JS 代码有关，但我就是无法破解它。

body {
overflow-x: hidden;
}

ul {
list-style: none;
margin-top: 0px;
padding: 0;
}

li {
font-size: 30px;
color: black;
}

.fa-bars {
position: static;
left: 100px;
top: 10px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}

.fa-bars:hover {
opacity: 0.7;
}

.fa-times {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}

.fa-times:hover {
opacity: 0.7;
}

nav {
background-color: lightslategrey;
width: 250px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1;
transform: translate3d(-250px, 0, 0);
transition: all 0.5s ease-in-out;
}

.active-nav {
transform: translate3d(0,0,0);
}

.closed-nav {
transform: translate3d(-250px, 0, 0);
}

<i class="fa fa-bars fa-3x" aria-hidden="true"></i>

<nav>
    
    <ul>
        <i class="fa fa-times fa-2x"></i>
        <li>New TO</li>
        <li>Street TO</li>
        <li>Classy TO</li>
        <li>Athletic TO</li>
    </ul>

</nav>

JS:

$(function () {

$('.fa-bars').click(function () {
    $('nav').toggleClass('active-nav');
});

$('.fa-times').click(function() {
    $('.active-nav').toggleClass('closed-nav');
});

});

https://jsfiddle.net/sdvb45nj/

Answer 1

点击关闭按钮时出现问题

$('.active-nav').toggleClass('closed-nav');

使用上面的代码，您将添加 closed-nav 到 nav ，它将关闭...之后您使用

$('nav').toggleClass('active-nav'); 

使用上面的代码，您从 nav 中删除了 active-nav 而 closed-nav 仍然存在

所以你需要删除 closed-nav 类并添加 active-nav ..

要解决你可以使用

$('nav').removeClass('closed-nav').addClass('active-nav');

代替

$('nav').toggleClass('active-nav');

$(function () {
    
    $('.fa-bars').click(function () {
        $('nav').removeClass('closed-nav').addClass('active-nav');
    });
    
    $('.fa-times').click(function() {
        $('.active-nav').toggleClass('closed-nav');
    });
    
});

body {
    overflow-x: hidden;
}

ul {
    list-style: none;
    margin-top: 0px;
    padding: 0;
}

li {
    font-size: 30px;
    color: black;
}

.fa-bars {
    position: static;
    left: 100px;
    top: 10px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.fa-bars:hover {
    opacity: 0.7;
}

.fa-times {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.fa-times:hover {
    opacity: 0.7;
}

nav {
    background-color: lightslategrey;
    width: 250px;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1;
    transform: translate3d(-250px, 0, 0);
    transition: all 0.5s ease-in-out;
}

.active-nav {
    transform: translate3d(0,0,0);
}

.closed-nav {
    transform: translate3d(-250px, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
    
    <nav>
        
        <ul>
            <i class="fa fa-times fa-2x"></i>
            <li>New TO</li>
            <li>Street TO</li>
            <li>Classy TO</li>
            <li>Athletic TO</li>
        </ul>

    </nav>