JSFiddle - React, Tailwind, and code Playground

by oneboy

HTML

<ul class="compound_list">
  <li>Языки программирования
    <ul>
      <li><a href="/lang/php">PHP</a></li>
      <li><a href="/lang/perl">Perl</a></li>
      <li><a href="/lang/python">Python</a></li>
    </ul>
  </li> 
  <li>Интегрированные среды программирования
    <ul>
      <li><a href="/ide/eclipse">Eclipse</a></li>
      <li><a href="/ide/netbeans">NetBeans</a></li>
      <li><a href="/ide/visual_studio">Visual Studio</a></li>
    </ul>
  </li> 
</ul>

CSS

.compound_list > li {
    list-style: url('http://www.iconsearch.ru/uploads/icons/fatcow/16x16/bullet_toggle_plus.png');
    cursor: pointer;
}
.minus {
    list-style: url('http://www.iconsearch.ru/uploads/icons/fatcow/16x16/bullet_toggle_minus.png') !important;
}
li > ul > li {
    list-style: none;
}

JavaScript

$(function(){
    // удалить в рабочем варианте |-->
    $('a').click(function(e){
        e.preventDefault();
    });
    // <--|
    
    // основной код
    var firstLvl = $('.compound_list > li');
    var secondLvl = $('.compound_list ul li').hide();
    
    secondLvl.click(function(evt){
        evt.stopPropagation();
    });
        
    firstLvl.click(function(){
        $(this).toggleClass('minus')
            .find(secondLvl).toggle(function(){
                $(this).children().show();
            });
    });
});