JQuery: добавление функции щелчка к существующему переключателю

Question

Как закрыть этот ящик при нажатии холста? Кроме того, поскольку сам ящик в холсте будет щелкать ящик, когда он открыт, закройте его тоже? Это было бы нежелательно. Любая помощь будет большой, спасибо!

$(function(){ 
    $('.toggle-nav').click(function(){ 
     toggleNav(); 
     }); 
    }); 
function toggleNav(){ 
    if ($('#site-wrapper').hasClass('show-nav')){ 
     // nav-close functions 
     $('#site-wrapper').removeClass('show-nav'); 
    } else{ 
     // nav-open functions 
     $('#site-wrapper').addClass('show-nav'); 
     } 
    } 

http://jsfiddle.net/8s42f/

Answer 1

Это должно сделать трюк:

http://jsfiddle.net/8s42f/3/

Обновлено JS:

$(function() { 
    var $wrapper = $('#site-wrapper'); 
    function toggleNav (event) { 
     $wrapper.toggleClass('show-nav'); 
     event.stopPropagation(); 
    } 
    function hideNav (event) { 
     if (!$(event.target).is('#site-menu, #site-menu *')) 
      $wrapper.removeClass('show-nav'); 
    } 
    $('.toggle-nav').click(toggleNav); 
    $('#site-wrapper').click(hideNav); 
}); 

Я сделал следующие изменения:

• Заменены дублирующие поиски для #site-wrapper с кэшированным переменными $wrapper
• Заменены toggleNav() логикой с $.fn.toggleClass() методом JQuery в
• Используется event.stopPropagation() для предотвращения .toggle-nav щелчков от запуская $wrapper события
• Добавлен hideNav() метода и сковали его $wrapper
• Добавлена ​​проверка внутри hideNav(), чтобы предотвратить попадание кликов внутри навигатора.

Надеюсь, это поможет!

Answer 2

Предположения: - холст = документ - ящик = # Сайт-обертка

Установить обработчик щелчка на document. Если что-либо, кроме #site-wrapper или его детей, будет нажато, «ящик» будет закрыт.

$(function() { 
    $(document).on('click', function (e) { 
     if (e.target.id === 'site-wrapper' || $(e.target).closest('#site-wrapper').length) { 
      e.stopPropagation(); 
      if (! $('#site-wrapper').hasClass('show-nav')) { 
       toggleNav(); 
      } 
     } else if ($('#site-wrapper').hasClass('show-nav')) { 
      toggleNav(); 
     } 
    }); 
}); 

function toggleNav() { 
    $('#site-wrapper').toggleClass('show-nav'); 
} 

И демо: http://jsfiddle.net/rodgolpe/8s42f/5/