Question

我目前正在使用复选框为我的sidenav执行css动画。我的汉堡包附有复选框，并且它处于检查状态，我对sidenav进行了相应的css更改。

这是HTML：

<input type="checkbox" id="sidebar_toggler" name="name" value="">
  <div class="page-wrap">
    <label for="sidebar_toggler"><img src="./images/hamburger.png" class="hamburger"></label>

这里是这个位的CSS（Sass）动画：

#sidebar_toggler
  display: none

  &checked + .page-wrap

    .sidebar
      left: 0px

    .hamburger
      left: 200px

    .text_elements
       margin-left: 90px

这部分工作得很漂亮，但是，当我点击侧边栏中的链接时，我需要重新定位.sidebar，.hamburger和.text_elements（或者实质上关闭侧边栏并移回周围的元素）。

我尝试为链接执行另一个复选框，但是，我不认为我的网站喜欢在同一页面上有多个复选框。我也尝试在侧边栏链接上设置jQuery，但这只能工作一次。单击侧栏中的链接后，对汉堡包的所有后续点击仅调整.text_elements位置，并停止打开sidenav。

这里是jQuery的代码：

$(document).ready(function() {

  $('#side_links').on('click', function() {
    $('.sidebar').css({
    'left': '-190px'
    });
  });

  $('#side_links').on('click', function() {
    $('.hamburger').css({
    'left': '20px'
    });
  });

});

有些帮助吗？

Answer 1

由于您打开侧边栏是基于是否选中#sidebar，因此您只需取消选中它即可关闭侧边栏。然后CSS会处理其余的事情。

＆＃13;

$('#side_links').on('click', function() {
  $("#sidebar_toggler").prop('checked', false)
});

＆＃13;

.contents {
  position: relative;
  z-index: 0;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
}

.hamburger {
  position: absolute;
  top: 20px;
  right: 0;
  bottom: 0;
  left: 20px;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  z-index: 1;
  width: 50px;
  margin-top: -7px;
  cursor: pointer;
}

.sidebar {
  position: fixed;
  top: 0px;
  right: 0;
  bottom: 0px;
  left: -190px;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  width: 180px;
  padding: 10px;
  background: red;
  z-index: 0;
  font-family: Offside;
  font-weight: bolder;
}

.sidebar ul {
  list-style: none;
  margin-top: 21px;
}

.sidebar li {
  font-size: 18px;
  margin-bottom: 35px;
  -webkit-font-smoothing: antialiased;
}

#sidebar_toggler {
  display: none;
}

#sidebar_toggler:checked + .page-wrap .sidebar {
  left: 0px;
}

#sidebar_toggler:checked + .page-wrap .hamburger {
  left: 200px;
}

#sidebar_toggler:checked + .page-wrap .text_elements {
  margin-left: 90px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="sidebar_toggler">
<div class="page-wrap">
  <label for="sidebar_toggler"><img src="./images/hamburger.png" class="hamburger"></label>
  <div id="contents">
    <div class="container-fluid" id="splash">
      <div class="row">
        <div class="text_elements">
          <div class="container-fluid" id="project_header">
            <a name="projects"></a>
            <p>Text elements here</p>
            <h1 id="projects_h1">Projects</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Sidebar begins -->
  <div class="sidebar">
    <nav class="link_effect">
      <ul>
        <li id="side_links"><a href="#projects">Projects</a></li>
        <li><a href="#">Github</a></li>
        <li><a href="#">LinkedIn</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

＆＃13;

jQuery覆盖复选框行为

1 个答案: