Остановить распространение не работает - ul> li> ul> li - jQuery

Question

Я пытаюсь создать двойную боковую панель с открытым окном. Каждый li на боковой панели может иметь список, который может иметь собственный список. Пример:

<div class="list-panel"> 
    <ul> 
     <li class="category"> 
      <a href="/inphos/"> 
       <i class="glyphicon glyphicon-home"></i> 
       <span class="nav-label">Dashboard</span> 
      </a> 
     </li> 
     <li class="category"> 
      <a href="#"> 
       <i class="glyphicon glyphicon-pencil"></i> 
       <span class="nav-label">Administratie</span> 
      </a> 
      <ul> 
       <li class="group"> 
        <a href="#">Abonnementen</a> 
        <ul> 
         <li> 
          <a href="#">Abo-Orders</a> 
         </li> 
         <li> 
          <a href="#">VoIPGrid</a> 
         </li> 
         <li> 
          <a href="#">RoutIT</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Верхний ли имеет класс «категория». Когда я нажимаю на 1 уровень ниже, класс «группа», я не хочу скользить всю «категорию» вверх, но открываю список ниже «группа» или перенаправляю пользователя.

Я пытаюсь сделать это с помощью следующих действий:

$('.group').on('click', function(){ 
    console.log('group'); 
}).on('click','ul>li',function(e){ 
    e.stopPropagation(); 
}).on('click','category',function(e){ 
    e.stopPropagation(); 
}); 

$('.category').on('click',function(){ 
    console.log('category'); 
    if($(this).hasClass('active')){ 
     $(this).children('ul').slideUp(200); 
     $(this).removeClass('active'); 
    } else { 
     $(this).children('ul').slideDown(200); 
     $(this).addClass('active'); 
    } 
}); 

По какой-то причине эта часть jQuerycode не работает должным образом, какие-либо идеи, почему?

jsFiddle здесь: http://jsfiddle.net/abayob/bo4bkfzq/

Answer 1

ломая это: -

$('.group').on('click', function(){ 
    console.log('group'); 
}).on('click','ul>li',function(e){ 
    e.stopPropagation(); 
}).on('click','category',function(e){ 
    e.stopPropagation(); 
}); 

вы можете посмотреть здесь: -

$('.group').on('click','category',function(e){ 
    e.stopPropagation(); 
}); 

что ищет categoryэлемент, не класс в пределах group. которого он не найдет. изменение category до .category все равно не будет работать, потому что category является родителем group.

попробовать это: -

$(document).ready(function(){ 
 
    $('.category, .group').on('click',function(){ 
 
     console.log('category'); 
 
     if($(this).hasClass('active')){ 
 
      $(this).children('ul').slideUp(200); 
 
      $(this).removeClass('active'); 
 
     } else { 
 
      $(this).children('ul').slideDown(200); 
 
      $(this).addClass('active'); 
 
     } 
 
     return false; 
 
    }); 
 
});

li { 
 
    list-style-type: none; 
 
} 
 
li a { 
 
    text-decoration:none; 
 
    color:black; 
 
    font-family: Times; 
 
    border-bottom: 1px solid #999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list-panel"> 
 
    <ul> 
 
     <li class="category"> 
 
      <a href="/inphos/"> 
 
       <i class="glyphicon glyphicon-home"></i> 
 
       <span class="nav-label">Dashboard</span> 
 
      </a> 
 
     </li> 
 
     <li class="category active"> 
 
      <a href="#"> 
 
       <i class="glyphicon glyphicon-pencil"></i> 
 
       <span class="nav-label">Administratie</span> 
 
      </a> 
 
      <ul> 
 
       <li class="group active"> 
 
        <a href="#">Abonnementen</a> 
 
        <ul> 
 
         <li> 
 
          <a href="#">Abo-Orders</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">VoIPGrid</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">RoutIT</a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

return false; предотвратит событие по умолчанию и остановить его бурлит.

Также добавьте active класс в category и group, после чего они начинают открываться.

Answer 2

Вы никогда не добавляли e.stopPropagation() для .group элементов, у вас только есть console.log(). Не забудьте добавить e в качестве параметра функции события.

Кроме того, вы захотите добавить «активный» класс в свои списки в начале. Прямо сейчас для получения заметных изменений требуется два клика.