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

Andy Lyell 发表于 Dev

安迪·莱尔（Andy Lyell）

晚上好，

我在尝试找出为什么必须单击两次测试按钮以激活jquery功能（其中侧面导航栏将从左侧滑入）时遇到了麻烦。我想通过将宽度CSS类定位为使其“增长”来实现此目的。

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

这是下面显示的代码，我希望有足够的地方继续原谅我，我对此还很陌生：

HTML：

<a href="" class="test">Click me</a>

<div class="sidenav">
    <div class="closebtn"><a href="">Close me</a></div>
</div>

CSS：

.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;
}

jQuery：

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

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

谢谢！

迈克尔·科克

a如果要保留在同一页面上并仅切换导航，则需要禁用标记的默认行为。默认情况下，浏览器将a在您单击标记时尝试遵循该标记。由于您的href属性为空，因此只会尝试转到当前页面或有效地重新加载该页面。您可以通过将e事件传递给点击处理程序函数并调用来阻止浏览器尝试跟踪链接e.preventDefault()

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

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

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="test">Click me</a>

<div class="sidenav">
    <div class="closebtn"><a href="">Close me</a></div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。