jQuery覆蓋複選框行爲

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此位（薩斯）動畫：

#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將會處理剩下的事情。

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

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

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