Как исправить скрытие списка?

Question

[Minningt]

1. Как сделать, чтобы при клике на дочерний ul список скрывался также, как и при клике вне списка? Cейчас, например, нажимаем на факториал в "Мат. выч", а список заново открывается. Хочется, чтобы при клике на факториал список закрывался, а открывался заново при нажатии на "Мат. выч".
2. Как можно оптимизировать еще код, а то получается немного быдловато?
jsfiddle.net/foxt4bu4/1
3. Как сделать активным пункты "Мат. выч, Объем или Площадь", когда на них нажали?
4. Не обязательный пункт, но хочется узнать для себя. Как можно реализовать данный пример на чистом JS, без использования jquery.

Answer 1

[Михаил Горячкин]

В общем не совсем понятно зачем вам это все на чистом js-се, ну да ладно, вот вам демка. Вроде все учел, что вам было надо, если нет то сами подправите. Сам js такой:

(function(w, d){
  
  var childOf = function (child, parent) {
    while((child=child.parentNode) && child!==parent); 
    return !!child;
  };
  
  var initApp = function() {
      var activeTab,
          menu = d.querySelector('#menu'),
          firstLevel = menu.children || [], 
          ln = firstLevel.length;
    
      var tabClickHandler = function (e) {
        e.preventDefault();
        if (!activeTab) {
          activeTab = this;
        } else {
          activeTab.classList.remove('active');
          activeTab = this;
        }
        this.classList.add('active');
      };
  
      var innerTabClickHandler = function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (activeTab) {
          activeTab.classList.remove('active');
        }
      };
  
      var closeMenuHandler = function (e) {
        var target = e.target || e.srcElement;

        if(!childOf(target, menu)) {
            if (activeTab) {
              activeTab.classList.remove('active');
            }
        }
      };
      
      if (!ln) return;
      
      while(ln--) {
        var tab = firstLevel[ln], 
            secondLevel = tab.querySelectorAll('ul > li') || [],
            lnS = secondLevel.length;
       
        tab.addEventListener('click', tabClickHandler, false);
        while(lnS--) {
          var innerTab = secondLevel[lnS];
          innerTab.addEventListener('click', innerTabClickHandler, false);
        }
      }
      
      d.addEventListener('click', closeMenuHandler, false);
  };
  
  w.addEventListener('DOMContentLoaded', initApp);
}(window, document));

Работать будет с IE9 и выше. Для анимации раскрытия используется обычный css.

Answer 2

[Николай Антонов]

Можно и без js - с помощью чекбоксов.