Javascript 关闭所有其他UL'；点击一下就可以了

我在下面为移动导航编写了这段代码。一切正常，但当打开一个UL时，我希望另一个UL关闭。有人知道怎么写这个吗

小提琴代码：-

只需使用：

$('nav > ul li a').on('click', function (ev) {
    if ($(this).next('ul').length > 0) {
        if ($(this).hasClass('opened')) {
            $(".opened").removeClass('opened');
        } else {
            $(this).addClass('opened');
            $(this).next('ul').show();
            ev.preventDefault();
        } 
    } else {

    }
});  

---

我已经单独用css处理过类似的情况

如果你想要一个严格的Jquery解决方案，一定要告诉我

---

请检查一下这个

这里是最新的

我已向每位家长添加了class=“li标签”

像这个

<li>
      <a class="li-lable" href="#">child4</a>
           <ul>
               <li><a href="#">child41</a>
               </li>
               <li><a href="#">child42</a>
               </li>
               <li><a href="#">child43</a>
               </li>
           </ul>
</li>

---

}))

这不起作用-所有父ul仍然打开。这不起作用-所有父ul仍然打开。父子层次结构的级别是什么？

$('nav > ul li a').on('click', function (ev) {
      ev.preventDefault();
    if ($(this).next('ul').length > 0) {
        if ($(this).hasClass('opened')) {
            $(".opened").removeClass('opened');
            $(this).next('ul').hide()
        } else {
            console.log($('li'))
            $('li a').each(function () {
                 $(this).removeClass('opened')
                 $(this).next('ul').hide()
            });


            $(this).addClass('opened');
            $(this).next('ul').show();

        } 
    } 
}); 

ul li ul {
    display:none;
}

nav>ul>li>a:focus+ul{
    display:block;
}

            $('nav > ul li a').on('click', function (ev) {
                if (!$(this).hasClass('opened')) 
                    $('nav .opened').removeClass('opened').next().hide();

                if ($(this).next('ul').length > 0) {
                    if ($(this).hasClass('opened')) {

                    } else {
                        $(this).addClass('opened');
                        $(this).next('ul').show();
                        ev.preventDefault();
                    } 
                } else {

                }
            }); 

<li>
      <a class="li-lable" href="#">child4</a>
           <ul>
               <li><a href="#">child41</a>
               </li>
               <li><a href="#">child42</a>
               </li>
               <li><a href="#">child43</a>
               </li>
           </ul>
</li>

$('nav ul li a ').on('click', function (ev) {
if ($(this).next('ul').length > 0) {

    $(this).parent().siblings().children().not(".li-lable").fadeOut()

     $(this).next('ul').find('li ul').hide()
     $(this).next('ul').fadeIn()

} else {
    alert('no submenu, redirect');
}