Vejam só, tudo esta funcionando como esperado, menos o removeClass no final do script. Ele simplesmente se recusa a remover a class. Tem algo errado?
$(document).ready(function() {
var cheight = $(".categorias > ul").height();
$(".categorias > ul").css("height", cheight);
var formheight = $(".menulateral form").height();
$(".subcategorias").css("top", -formheight)
$(document).on('click', '.categorias > ul > li', function() {
$(".menulateral form").addClass("ocultarform");
$(this).children(".subcategorias").addClass('subcategoriasactive');
var subheight = $(this).children(".subcategorias").height();
$(".categorias > ul").css("height", subheight - formheight);
});
$(document).on('click', '.subtitle', function() {
$(".subcategorias").removeClass("subcategoriasactive");
});
});
.categorias {
position: relative;
}
.categorias li {
list-style: none;
}
.categorias a {
color: #ccc;
cursor: pointer;
}
.categorias ul>li>a {
display: block;
font-size: 19px;
padding: 15px;
border-bottom: 1px solid rgba(238, 238, 238, 0.05);
}
.categorias ul>li>a svg {
position: relative;
top: 2px;
margin-right: 5px;
}
.subcategorias {
overflow: hidden;
position: absolute;
top: 0;
right: -100%;
bottom: 0;
background: #444;
z-index: 5;
border-radius: 0 0 5px 5px;
display: inline-table;
width: 100%;
}
.subcategoriasactive {
right: 0;
}
.subcategorias .subtitle {
background: #333;
}
.ocultarform {
visibility: hidden;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='categorias'>
<ul>
<li>
<a>
<span>CAMISETAS</span>
</a>
<ul class='subcategorias'>
<li class='subtitle'>
<a>
<span>CAMISETAS</span>
</a>
</li>
<li><a href="">FILMES</a></li>
<li><a href="">SÉRIES</a></li>
<li><a href="">MEMES</a></li>
<li><a href="">FRASES</a></li>
</ul>
</li>
<li>
<a>
<span>CANECAS</span>
</a>
<ul class='subcategorias'>
<li><a href="">ALGUMA</a></li>
<li><a href="">COISA</a></li>
<li><a href="">MEMES</a></li>
<li><a href="">FRASES</a></li>
</ul>
</li>
<li style='position:relative;'>
<a>
<span style='margin-left:29px;'>CHINELOS</span>
</a>
</li>
</ul>
</div>
<li>
está dentro do primeiro<li>
CAMISETAS, que abre o menu; quando você clica no interno, o evento de clique é propagado pelos elementos pais (bubbling) e acaba disparando novamente a função que adiciona a classe. Como é executado muito rápido nem é perceptível essa alteração visualmente.