Когда в навигаторе открыт один элемент, закройте все остальные. JQuery

Question

У меня есть открытая/закрытая навигация с помощью jQuery. И я попытался сделать так, чтобы, щелкнув, например. Пункт 2, если какие-либо другие предметы открыты, он должен закрыть их. Но теперь я не могу закрыть Пункт 2.

$(document).ready(

function() { 
    $('a.has-child').click(function() { 
     $('div.child').not(this).removeClass("open"); 
     $(this).closest('li').find('div.child').addClass("open"); 
    }); 
}); 

Вот скрипку: https://jsfiddle.net/mwcq0yek/

UPDATE: Я могу открыть пункт 4 и закрыть пункт 2, и наоборот. Но я не могу закрыть только пункт 2 или пункт 3.

Answer 1

Удалить класс для всех .child.

$('div.child').removeClass("open"); 

Затем добавить класс открытого для щелкнутого элемента

$(this).closest('li').find('div.child').addClass("open"); 

Demo

обновления

Вам нужно сделать тест, если вы хотите, чтобы закрыть .child подменит. Вам нужно протестировать, если это подменю имеет класс open или нет.

if (submenu.hasClass("open")) { 
     submenu.removeClass("open"); 
    } else { 
     $('div.child').removeClass("open"); 
     submenu.addClass("open"); 
    } 

updated demo