javascript - 单击其中的元素时如何切换侧边栏？

Question

我有以下侧导航栏:http://bootsnipp.com/snippets/featured/fancy-sidebar-navigation

一切正常，我在我的网站上实现了，但我希望当您单击列表元素时，侧导航栏关闭，我的想法是添加一个 id="link-item" 和添加到 js 文件中，当您单击元素时，侧导航栏将关闭。我尝试这样做:

第一次尝试:

$('#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');
  });
});

第二次尝试:

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

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

Answer 1

您可以简单地让触发器在 nav .sidebar-nav li 元素上运行，如下所示:

$(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');
  });  
});

<小时/>

我认为这是一个糟糕的实现。这满足了您所需要的一切:

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

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