Question

我正在Rails应用程序中构建侧边栏导航，自然需要使用一些JS允许侧边栏的子菜单。我拥有它，因此就应用正确的样式而言，它最适合使用jQuery并可以在其他页面上使用（但不能在主页上使用，这是一个单独的问题）。我想弄清楚的是如何用普通的JS而不是jQuery编写代码。

$(document).ready(function () {

$('#sidebarCollapse').on('click', function () {
    $('#sidebar').toggleClass('active').toggleClass('col-lg-2 col-md-2');
    $('#dash-wrapper').toggleClass('col-lg-11').removeClass('col-lg-9');
    $('#sidebar').toggle();
 });

});

我的想法是在链接上放置一个onclick函数，并将其引用至以下代码：

function sideSwitch (){
  var side = document.getElementById('sidebarCollapse');
  var dash = document.getElementById('dash-wrapper');
  var bar = document.getElementById('sidebar');
  bar.classList.toggle('active').toggle('col-lg-2 col-md-2');
  dash.classList.toggle('col-lg-11').removeClass('col-lg-9');
  bar.toggle();
}

在我的链接上，我有：

<%=link_to image_tag('products.png') + 'Products', '/', class: 'nav-link d-flex align-items-center flex-column sidebar side-links', id: 'sidebarCollapse', data: { toggle: 'collapse', target: '#submenu'}, :onclick => 'sideSwitch()'%>

这不起作用。不是触发。

Answer 1

toggle和toggleClass的纯javascript实现

function toggle(ele,className){

   if(!className){
     ele.style.display = ele.style.display === "" ? "none" : ""; 
     return;
   }
   if(ele.classList.contains(className)){
      ele.classList.remove(className);
   }else{
        ele.classList.add(className);
   }
}

function sideSwitch(){
   var sidebar = document.getElementById('sidebar');
   var dashWrapper = document.getElementById('dash-wrapper');
   toggle(sidebar,'active');
   toggle(sidebar,'col-lg-2');
   toggle(sidebar,'col-md-2');
   toggle(dashWrapper,'col-lg-11');
   toggle(dashWrapper,'col-lg-9');
   toggle(dashWrapper);

}

JavaScript切换类Onclick

1 个答案: