Remove class from other siblings

Question

I have a structure like

<ul>
  <li class="open active">
    <a></a>
    <ul class="submenu nav-show" style="display:block"></ul>
  </li>
  <li class="">
    <a></a>
    <ul></ul>
 </li>
</ul>

when user click on second li then from first li's ul which containing nav-show will be nav-hide and style will be display:hide

Till now I have tried

var open = document.querySelectorAll(".open");
var a=$(open).closest("li").addClass('active').siblings().removeClass('active');
$(a).siblings().closest("ul").removeClass('nav-hide').addClass('nav-show');

But its not working also tried

var open = document.querySelectorAll(".open");
$(open).closest("li").addClass('active').siblings().removeClass('active');
$(open).not(":has(.active)").collapse('hide');

but not giving proper output plz help me

Answer 1

try this:

$($p).closest('li').addClass('active').siblings().removeClass('active').end()
.parent().children().filter(function(){return $(this).find('.nav-show ').length>0}).addClass('.nav-hide').hide();

Or

$($p).closest('li').addClass('active').siblings().removeClass('active').end()
.siblings().filter(function(){return $(this).find('.nav-show ').length>0}).addClass('.nav-hide').hide();

try this jsfiddle