When one item is open in the nav, close all others width jQuery

Question

I have a navigation that is opened/closed with jQuery. And I tried to make it so that when you click eg. Item 2 if any other items are opened it should close them. But now I can't close Item 2.

$(document).ready(

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

Here's a fiddle: https://jsfiddle.net/mwcq0yek/

UPDATE: I am able to open Item 4 and close Item 2 and vice versa. But I can't close Item 2 or Item 3 alone.

Answer 1

Remove class to all .child .

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

Then add class open to the clicked element

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

Demo

update

You need to do a test if you want to close the .child submenu. What you need is to test, if that submenu has a class open or not.

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

updated demo