Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2015, 17:44
Аспирант
Отправить личное сообщение для Velidan Посмотреть профиль Найти все сообщения от Velidan
 
Регистрация: 13.02.2015
Сообщений: 32

Вложенные переключатели
Доброго дня уважаемые коллеги. Столкнулся с очень непростой проблемой, самостоятельно решить не могу.
Суть:
у меня есть много выпадающих элементов, чтобы вручную не вешать обработчик на каждую кнопку сделал универсальную схему. Создал класс, который получаю в 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 , если есть - ничего не производить (но тогда, дочерний элемент также не открывается )

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

Последний раз редактировалось Velidan, 03.04.2015 в 17:46.
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2015, 18:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,883

Выпадающее меню на чистом js
Velidan,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .selfSwitcher > .dropDown {
    display: none;
  }
  .opened > .dropDown {
    display: block;
  }
  .selfSwitcher {
     border: 1px red solid;
  }

  </style>
</head>

<body>
<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>
<script>
  Array.prototype.forEach.call(document.querySelectorAll(".selfSwitcher"), function(element) {
    element.addEventListener("click", function(event) {
        event.target == this && this.classList.toggle("opened")
    })
});</script>
</body>

</html>

Последний раз редактировалось рони, 03.04.2015 в 19:19.
Ответить с цитированием
  #3 (permalink)  
Старый 03.04.2015, 18:55
Аспирант
Отправить личное сообщение для Velidan Посмотреть профиль Найти все сообщения от Velidan
 
Регистрация: 13.02.2015
Сообщений: 32

Рони, в который раз спасибо Вам огромное за помощь.

Решил самостоятельно вот таким образом, правда, как-то очень топорно вышло, но я очень рад, что у меня хоть как-то получилось.
function SwitcherHandleBuilder(elementsClass,parentMode){
        var parentMode  = parentMode || false;
        var className = elementsClass;
        var elementsCollection = Array.prototype.slice.call(document.getElementsByClassName(className));
        var collectionCount = elementsCollection.length;

       // alert(collectionCount)

        var makeSelfSwitcherHandler = function(element){
            return function(event){
                var event = fixEvent(event,this);
                var target = event.target;
               // alert(target.tagName+"   "+target.classList.contains(className)+"   "+className);
                if(!target.classList.contains(className)){
                       return;
                    } else {
                    if(!parentMode){
                        element.classList.toggle('opened');
                    } else{
                        element.parentNode.classList.toggle('opened');
                    }
                }
              event.stopPropagation();
            };
        };

        for(var counter = 0; counter<collectionCount; counter++){
            var element = elementsCollection[counter];
            element.addEventListener('click',makeSelfSwitcherHandler(element));
        };
    };

    // SwitcherHandleBuilder(@param - string, @param=false (boolean -> Optional)))(передаем класс для обработки и включаем "Родительский режим" когда класс opened присвоится родителю элемента
    SwitcherHandleBuilder("selfSwitcher");
    SwitcherHandleBuilder("switchParent",true);
    SwitcherHandleBuilder("switcherLevel_1");
Ответить с цитированием
  #4 (permalink)  
Старый 03.04.2015, 19:04
Аспирант
Отправить личное сообщение для Velidan Посмотреть профиль Найти все сообщения от Velidan
 
Регистрация: 13.02.2015
Сообщений: 32

А что у Вас значит: с ?
c.addEventListener("click", function(a) {}


Это элемент, насколько я понял? Почему такая странная форма? я знаю, что есть для event = e, для элемента не знал.
Где можно посмотреть все возможные сокращения?
Ответить с цитированием
  #5 (permalink)  
Старый 03.04.2015, 19:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,883

Сообщение от Velidan
Где можно посмотреть все возможные сокращения?
в голове -- но лучше переменным давать осмысленные названия. убрал чтоб вопросов не было
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вложенные табы Тельман Элементы интерфейса 3 28.11.2013 15:49
Прототипное наследование не распространяется на вложенные свойства? novikov Общие вопросы Javascript 4 19.11.2012 13:31
вложенные фреймы Леночка Элементы интерфейса 13 20.05.2012 11:05
toggle и вложенные элементы john-samilin jQuery 1 14.07.2011 17:48
Json и вложенные массивы ArmagedDance jQuery 6 08.06.2011 12:42