JSFiddle - React, Tailwind, and code Playground

by Sergey

HTML

<div id="menu-glm">
    
<ul id='nav_list_moy' class='nav_list'>


<li >
<a href='/about/' title='О компании'>О компании</a>
<div class='plus'></div>


    <ul>
    <li><a href='/about/management/' title='Менеджмент'>Менеджмент</a></li>
    <li><a href='/about/history/' title='История'>История</a></li>
    <li><a href='/about/vacancies/' title='Вакансии'>Вакансии</a></li>
    <li><a href='/about/awards/' title='Награды и сертификаты'>Награды и сертификаты</a></li>
    <li><a href='/about/partners/' title='Партнёры'>Партнёры</a></li>
    </ul>
    
</li>


<li >
<a href='/corporate/' title='Услуги'>Услуги</a>
<div class='plus'></div>
</li>


<li id='activ'>
<a href='/clients/clients/' title='Клиенты'>Клиенты</a>
<div class='plus'></div>

    <ul>
    <li><a href='/clients/clients/' title='Клиенты'>Клиенты</a></li>
    <li><a href='/clients/portfolio/' title='Портфолио'>Портфолио</a></li>
    <li><a href='/clients/review/' title='Отзывы о работе'>Отзывы о работе</a></li>
    </ul>

</li>


<li >
<a href='/coordinates/main-office/' title='Контакты'>Контакты</a>
<div class='plus'></div>
    
    <ul>
    <li><a href='/coordinates/main-office/' title='Основной офис'>Основной офис</a></li>
    <li><a href='/coordinates/region-office/' title='Подразделения'>Подразделения</a></li>
    <li><a href='/coordinates/feedback/' title='Обратная связь'>Обратная связь</a></li>
    </ul>
    
</li>
</ul>    
  
    
    
</div>

CSS

html, body {margin:0px; padding:0px; background-color:#385762; font-size:13px; 
    line-height:18px; font-family:Arial; height:100%; color:#fff;}



#menu-glm {
        width: 240px;
        position: relative;
        }
        
        
.nav_list {
            padding: 0px;
            margin: 0px;
            width:240px;
            list-style:none;
        }
.nav_list li {
            position:relative;
        }
.nav_list li a {
            padding:5px 0px 5px 20px;
            display:block;
            font-size:15px;
            font-weight:bold;
            color:#fff;
            text-decoration:none;
        }

.nav_list li a:hover {
            color: #fff;
            background-color: #24a6d7;
        }
        
        
        
.nav_list ul {
margin:0;
display:none;
padding:0px;
margin:0px;
}

.nav_list ul li {
list-style:none;
position:static;

}
.nav_list ul a  {
padding-left: 0px;
font-size:14px;
color:#a3e5fc;
padding:3px 0px 3px 30px;
font-weight:normal;
}     


.nav_list li div {

position:absolute;
top:5px;
left:2px;
border: 0px;
padding:0px;
margin:0px;
}

.nav_list li div img {
padding:0px;
margin:0px;
cursor: pointer;
}

JavaScript

$(document).ready(function() {
   

$('ul', '#nav_list_moy').each(function() {
        $(this)
            .closest('li')
            .children('.plus')
            .append('<img src="http://milknews.ru/img/plus.gif">');
    });


$('#activ > ul').slideDown(250);
$('#activ > div').html('<img src="http://milknews.ru/img/minus.gif">');
    
$('div.plus').click(function(){
    
    var otkrPodmenu = $('div.plus + ul:visible'); // все открытые подменю
    var dlayPlusikov = $('div.plus + ul'); // выбираем все div после которых есть подменю ??????
    
    if($(this).next().is(':hidden')) // проверяем скрыт или нет
        {
            otkrPodmenu.slideUp(250); // сначала закрываем все открытое
          //  dlayPlusikov.html('<img src="http://milknews.ru/img/plus.gif">'); тут всем присваиваем плюсики
            $(this).next().slideDown(250); // открываем кликнутое
            $(this).html('<img src="http://milknews.ru/img/minus.gif">');
        } 
    else 
        {
            $(this).next().slideUp(250);
            $(this).html('<img src="http://milknews.ru/img/plus.gif">');    
        }
});
    
    
}); // 0 - конец ready