JSFiddle - React, Tailwind, and code Playground

by Sergey

HTML

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

<li id='glLi'>
<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='glLi'>
<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;
        border: 1px solid #24a6d7;
        }
        
        
.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:7px;
left:2px;
border: 0px;
padding:0px;
margin:0px;
}

.nav_list li div img {
padding:0px;
margin:0px;
cursor: pointer;
border: 1px solid #fff;
height: 10px;
width: 10px;
}

JavaScript

$(document).ready(function() {
   

if ($('#glLi:has("ul")'))

    {
        $('div.plus').append('<img src="img/1.gif">');
    }

    
$('div.plus').click(function(){
    
    if($(this).next().is(':hidden')) // проверяем скрыт или нет
        {
            $(this).next().slideDown(200);
        } 
    else 
        {
            $(this).next().slideUp(200);    
        }
});
    
}); // полный зе енд