如何在单击元素时切换侧边栏？

Question

I have the following sidenavbar: http://bootsnipp.com/snippets/featured/fancy-sidebar-navigation

All works fine, I implemented to my website, but I want when you click on element of list, the sidenavbar to close, my idea was to add an id="link-item" and to add in js file when you click on element the sidenavbar will close. My try to make this:

First Try:

$('#link-item').click(function () {
  var trigger = $('.hamburger'),
      overlay = $('.overlay'),
      isClosed = false;

  $('#link-item').click(function () {
    hamburger_cross();
  });

  function hamburger_cross() {

    if (isClosed == true) {
      overlay.hide();
      trigger.removeClass('is-open');
      trigger.addClass('is-closed');
      isClosed = false;
    } else {
      overlay.show();
      trigger.removeClass('is-closed');
      trigger.addClass('is-open');
      isClosed = true;
    }
  }

  $('[data-toggle="offcanvas"]').click(function () {
      $('#wrapper').toggleClass('toggled');
  });
});

Second Try:

trigger.click(function () {
  hamburger_cross();      
});

$('#link-item').click(function () {
  hamburger_cross();      
});

Answer 1

Use in list item data-toggle="offcanvas" just like

<li>
   <a id="id" data-toggle="offcanvas" href="#">Home</a>
</li>


var trigger = $('.hamburger, #id')

Answer 2

You can simply let the trigger run on the nav .sidebar-nav li elements like this:

$(document).ready(function () {
  var trigger = $('.hamburger, nav .sidebar-nav li'),
      overlay = $('.overlay'),
     isClosed = false;

    trigger.click(function () {
      hamburger_cross();      
    });

    function hamburger_cross() {

      if (isClosed == true) {          
        overlay.hide();
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
      } else {   
        overlay.show();
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
      }
  }

  $('[data-toggle="offcanvas"], nav .sidebar-nav li').click(function () {
        $('#wrapper').toggleClass('toggled');
  });  
});

---

I think it is a poor implementation though. This does all you need:

$(document).ready(function () {
    var trigger = $('.hamburger, nav .sidebar-nav li');

    trigger.click(function () {
        $('.overlay').toggle();
        trigger.toggleClass('is-open is-closed');
        $('#wrapper').toggleClass('toggled');
    });
});