[Velidan]

Доброго дня уважаемые коллеги. Столкнулся с очень непростой проблемой, самостоятельно решить не могу.
Суть:
у меня есть много выпадающих элементов, чтобы вручную не вешать обработчик на каждую кнопку сделал универсальную схему. Создал класс, который получаю в js и каждому из них вешаю обработчик.
Схема такова:

<div class="selfSwitcher">My Delivery 14780
                            <div class="dropDown">
                                <ul>
                                    <li>My Delivery 14780</li>
                                    <li>My Delivery 14780</li>
                                    <li>My Delivery 14780</li>
                                </ul>
                            </div>
                        </div>
<!-- может быть еще такой вид  <div class="selfSwitcher"><span>My Delivery 14780</span>  -->

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

var allSelfSwitchers = Array.prototype.slice.call(document.querySelectorAll('.selfSwitcher'));
    var selfSwitchersCount = allSelfSwitchers.length;

    var makeSelfSwitcherHandler = function(selfSwitcher){
        return function(event){
            var event = fixEvent(event,this);
            var target = event.target;
            if(!target.classList.contains('selfSwitcher')){
                if(target.classList.contains('dropDown') || target.parentNode.classList.contains('dropDown')) {
                    return;
                }
            }
            selfSwitcher.classList.toggle('opened');
        };
    };

    for(var counter = 0; counter<selfSwitchersCount; counter++){
        var selfSwitcher = allSelfSwitchers[counter];
        selfSwitcher.addEventListener('click',makeSelfSwitcherHandler(selfSwitcher));
    };

Проблема в том, что теперь, нужно чтобы у меня был выпадающий элемент, в нем еще выпадающий элемент и в нем еще один. (Вот такая закрученная схема).

т.е.

<div class="selfSwitcher">My Delivery 14780
                            <div class="dropDown">
                                <ul>
                                    <li>My Delivery 14780</li>
                                    <li>My Delivery 14780</li>
                                    <li>My Delivery 14780
                       <div class="selfSwitcher">My Delivery 14780
                            <div class="dropDown">
                                <ul>
                                    <li>My Delivery 14780</li>
                                    <li>My Delivery 14780</li>
                                    <li>My Delivery 14780</li>
                                </ul>
                            </div>
                        </div></li>
                                </ul>
                            </div>
                        </div>

event.stopPropagation не помогает. Не могу придумать как сделать так, чтобы элемент открылся, ему добавился класс и при клике на такой же ДОЧЕРНИЙ элемент, чтобы родитель не закрывался, а вложенный открылся и т.д.

Я могу добавить условие в проверку конкретно под этот случай через фиксированную проверку родителей на 2-3 уровня. Но это не очень хорошо. Можно ли как-то это систематизировать?

Думал подниматься по древу родителей и проверять наличие класса opened , если есть - ничего не производить (но тогда, дочерний элемент также не открывается )

Буду благодарен за любую помощь.