为什么我必须双击才能激活jquery功能？

晚上好,

我很难理解为什么我必须点击两次测试按钮来激活jquery功能，在这个功能中，一个侧导航条将从左侧滑入。我想通过瞄准width css类使其“增长”来实现这一点

然后，当我单击关闭按钮时，它将恢复正常

以下是代码，我希望有足够的代码继续原谅我，我对这一点相当陌生：

HTML:

Jquery：

$(document).ready(function(){
    $(".test").click(function(){
        $(".sidenav").css('width', '350px');
    });
});

$(document).ready(function(){
    $(".closebtn").click(function(){
        $(".sidenav").css('width', '0px');
    });
});

---

谢谢大家!

如果您想停留在同一页面上，只需切换导航，则需要禁用

a

标记的默认行为。默认情况下，当您单击

标记时，浏览器将尝试跟随该标记。由于您的
href
属性为空，因此将尝试转到当前页面，或有效地重新加载页面。通过将
e
事件传递给click handler函数，并调用
e.preventDefault（）


$（文档）.ready（函数（）{
$（“.test”）。单击（函数（e）{
$（“.sidenav”）.css（'width'，'350px'）；
e、 预防默认值（）；
});
});
$（文档）.ready（函数（）{
$（“.closebtn”）。单击（函数（）{
$（“.sidenav”）.css（'width'，'0px'）；
});
});
.sidenav{
填充顶部：50px；
高度：100vh；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
颜色：#ee81e0；
}
.测试{
填充：10px 20px；
边框：1px实心#d4127e；
}
您不需要2个
.ready（）
函数。把它全部用1包起来

另外，使用
event.preventDefault（）以便事件不会进一步冒泡

阅读：

工作代码片段：
$（文档）.ready（函数（）{
$（“.test”）。单击（函数（事件）{
$（“.sidenav”）.css（'width'，'350px'）；
event.preventDefault（）；
});
$（“.closebtn”）。单击（函数（）{
$（“.sidenav”）.css（'width'，'0px'）；
});
});
.sidenav{
填充顶部：50px；
高度：100vh；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
颜色：#ee81e0；
}
.测试{
填充：10px 20px；
边框：1px实心#d4127e；
}

或者，因为它们实际上不是链接，所以可以使用按钮，这样就不必使用
event.preventDefault（）谢谢，我已经将函数打包成一个：）@AndyLyell真棒！
.sidenav {
    padding-top: 50px;
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden; 
    transition: 0.5s;
    color: #ee81e0;
}

.test {
    padding: 10px 20px;
    border: 1px solid #d4127e;
}

$(document).ready(function(){
    $(".test").click(function(){
        $(".sidenav").css('width', '350px');
    });
});

$(document).ready(function(){
    $(".closebtn").click(function(){
        $(".sidenav").css('width', '0px');
    });
});