Добавить/удалить класс при нажатии - как удалить класс во второй области щелчка?

Question

У меня есть меню с выпадающим списком, где элемент LI получает активизацию при щелчке. После многого, после битвы, мне удалось установить скрипт, который устанавливает активный класс в div, который я скрыл, который отображается на клике как наложение на сайт (в раскрывающемся списке). все работает так, как должно, за исключением случаев, когда я выхожу за пределы выпадающего списка, чтобы закрыть его, а не щелкнуть мышью. Это не меняет класс моего наложения div - как я могу изменить свой скрипт для работы с кликами за пределами выпадающего списка, и на что я должен нацелиться здесь?

Скрытое ДИВ:

<div id="site-overlay"></div> 

сценарий:

$.noConflict(); 
jQuery(document).ready(function(){ 
    jQuery('li').on('click', function(){ 
     if(jQuery(this).hasClass('active')) { 
      jQuery("#site-overlay").addClass("active"); 
     } else { 
      jQuery("#site-overlay").removeClass("active"); 
     } 
    }) 
}); 

Answer 1

Это будет работать:

$.noConflict(); 
jQuery(document).ready(function() { 
    jQuery('li').on('click', function() { 
     if (jQuery(this).hasClass('active')) { 
      jQuery("#site-overlay").addClass("active"); 
     } else { 
      jQuery("#site-overlay").removeClass("active"); 
     } 
    }); 

    jQuery("#site-overlay").click(function() { 
     jQuery(this).removeClass("active"); 
    }); 
}); 

Обратите внимание на новый обработчик событий.

Answer 2

Вы можете добавить событие щелчка в теле документа, а затем проверьте расположение:

$(document).click(function(event) { 
    if(!$(event.target).closest('#site-overlay').length) { 
     if($('#site-overlay').is(":visible")) { 
      $('#site-overlay').hide() 
     } 
    }   
}) 

Answer 3

jQuery('li').on('click', function(){ 
    ... 
} 

Это выполняется только при нажатии на элемент «LI». Но как насчет нажатия на элемент 'li'? Попробуйте добавить или заменить:

jQuery('body').on('click', function(){ 
    if(jQuery('.megamenu li').hasClass('active')) { 
     jQuery("#site-overlay").addClass("active"); 
    } else { 
     jQuery("#site-overlay").removeClass("active"); 
    } 
}