Question

晚上好，

我无法弄清楚为什么我必须单击两次测试按钮以激活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');
    });
});

谢谢！

Answer 1

如果您想要停留在同一页面上并且只是切换导航，则需要禁用a标记的默认行为。默认情况下，当您点击它时，浏览器会尝试关注a标记。由于您的href属性为空，因此只会尝试转到当前页面，或者有效地重新加载页面。您可以通过将e事件传递给您的点击处理函数并调用e.preventDefault()

来阻止浏览器尝试关注该链接

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您不需要2 .ready()个功能。把它全部包装在一起。

此外，使用event.preventDefault();以便事件不会进一步冒泡。

阅读：event.preventDefault() | jQuery API Documentation

工作代码段：

$(document).ready(function() {
  $(".test").click(function(event) {
    $(".sidenav").css('width', '350px');
    event.preventDefault();
  });

  $(".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>

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

2 个答案: