JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<ul class="b-nav b-nav_level1">


					<li class="b-nav__item">
						<div class="b-nav__wrap-item" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij" class="b-nav__link">Для знаний</a>
                            <i class="b-nav__ar"></i>                        </div>

						<ul class="b-nav b-nav_sub-level2" style="display: block;">


					<li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/konstruktory" class="b-nav__link">Конструкторы</a>
                        </div>

								<ul class="b-nav b-nav_sub-level3">


					<li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/konstruktory/predmetnye" class="b-nav__link">Предметные</a>
                        </div>


					</li><li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/konstruktory/elektronnye" class="b-nav__link">Электронные</a>
                        </div>


					</li><li class="b-nav__item">
						<div class="b-nav__wrap-item b-nav__wrap-item_active">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/konstruktory/elementnye" class="b-nav__link">Элементные</a>
                        </div>

									</li>
								</ul>


					</li><li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/tablicy" class="b-nav__link">Таблицы</a>
                        </div>

							</li>
						</ul>


					</li><li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-progulok" class="b-nav__link">Для прогулок</a>
                                      ...

CSS

.b-nav {
	list-style:none;
	margin:0 0 20px;
	padding:0;
	border-radius: 10px;
}
.b-nav_level1{
  width: 220px;
  
}
.b-nav__item {
	margin:0;
	padding:0;
}
.b-nav__wrap-item {
	background:#dddddd;
	margin:0 0 1px;
	position:relative;
	padding:5px 25px 6px 11px;
}

.bdrs-bottom {
	border-radius:0 0 10px 10px;
}

.b-nav__wrap-item_active,
.b-nav__wrap-item:hover {
	background:#3378b4;
}
.b-nav__wrap-item_active .b-nav__link,
.b-nav__wrap-item:hover .b-nav__link {
	color:#fff;
	text-decoration:underline;
}
.b-nav__link {
	color:#3e4b52;
	font:12px/16px Tahoma,sans-serif;
	text-decoration:none;
}
.b-nav__ar {
	background:red 2px 2px no-repeat;
	cursor:pointer;
	height:11px;
	position:absolute;
	right:8px;
	top:10px;
	width:15px;
}
.b-nav_sub-level2 {
	display: none;
	margin-bottom:0;
}
.b-nav_sub-level3 {
	margin-bottom:0;
	margin-left:10px;
}
.b-nav_sub-level2 .b-nav__wrap-item {
	background:#d6e4f0;
	padding-left:20px;
	width:175px;
}
.b-nav_sub-level3 .b-nav__wrap-item {
	padding-left:20px;
	width:165px;
}
.b-nav_sub-level2 .b-nav__wrap-item_active,
.b-nav_sub-level2 .b-nav__wrap-item:hover {
	background:#99bbd9;
}
.b-nav_sub-level2 .b-nav__wrap-item_active .b-nav__link {
	color:#fff;
}
.b-nav_sub-level2 .b-nav__link {
	color:#436fad;
	text-decoration:underline;
}



.b-nav__wrap-item{
  position: relative;
  z-index: 3;
}

.active{
  border-bottom-left-radius: 5px; 
   border-bottom-right-radius: 5px; 
}
.b-nav_sub-level2>li>.b-nav__wrap-item:hover{
  cursor: pointer;
  
}

JavaScript

$("div:last").addClass("active");
$(".b-nav_level1>li:last-child>div:first").addClass("active");


$('.b-nav__ar').click(function(){
		var that = $(this).parents('.b-nav__item').children('.b-nav_sub-level2');
  var that2 = $(this).parents("li");
   if(that2.is(":last-child")){//Мы проверяем, если был нажат последний,
       //то:
       //Дальше мы проверяем скрыта ли или отсутствует b-nav_sub-level3 в самом последнем LI, если да, то добавляем ему активный класс
           if (that2.find('.b-nav_sub-level3:last').css('display')=="none" ||  
               that.children('li:last').children('.b-nav_sub-level3').css("display")==undefined){
             that2.find('.b-nav_sub-level2>li:last-child>div:first').addClass('active')
           } else {
             that2.find('.b-nav_sub-level2>li:last-child>div:first').removeClass('active')
             
           }
           if($(this).parents('.b-nav__wrap-item').hasClass('active') ){
            $(this).parents('.b-nav__wrap-item').removeClass('active');
            }else{
                $(this).parents('.b-nav__wrap-item').addClass('active');
            }
   }
		if($.browser.msie && $.browser.version=='7.0')// исправление косяка в ie7
			{ 
        if (that.is(':visible')){
              that.hide();
            }else {
              that.show();
         }   
			}
	    	else {
            that.slideToggle(300);
				}
	});



$('.b-nav_sub-level2>li>.b-nav__wrap-item').click(function(){
		 var that = $(this).parents('.b-nav__item').children('.b-nav_sub-level3');
  var that2 = $(this).parents("li:first");
  if(that2.is(":last-child")&& that2.parents("li:first").is(':last-child')){//Мы проверяем, если был нажат последний,
       //то:
       //Дальше мы проверяем скрыта ли или отсутствует b-nav_sub-level3 в самом последнем LI, если да, то добавляем ему активный класс
           if ($(this).hasClass('active')){
             $(this).removeClass('active')
           } else {
             $(this).addClass('active')
    ...