Javascript 下拉列表一次打开一次

我有一个包含子菜单的

ulli

列表。默认情况下，子菜单是隐藏的。当我单击第一个

li a

时，此子菜单将向下滑动。当我点击第二个“LIA”时，第二个子菜单将向下滑动

问题是，当我单击第二个

li A

时，第一个子菜单将向上滑动。这意味着一次只打开一个子菜单

请帮我一把

$（文档）.ready（函数（）{
$（'li a'）。在（'click'，function（）上{
$（this.sides（）.slideToggle（）；
});
});
li{填充：20px；边框：实心1px；边距：5px；}
.广场{
显示：无；
边框：1px纯红；
}



悬停列表1
广场1


悬停列表2
广场2


悬停列表3
广场3


悬停列表4
广场4


您需要一种方法来知道“开放”元素的位置


$（文档）.ready（函数（）{
$（'li a'）。在（'click'，function（）上{
$this=$（this）；
$opened=$this.closest（'ul'）.find（'.open'）；
$sides=$this.sides（）；
如果（！$sibbins.is（$opened））{
//toggleClass（）也会起作用，但这更显式
$opened.slideToggle（）.removeClass（'open'）；
//如果单击，这将禁止关闭打开的图元。
//如果不希望出现这种行为，请将前一行移到“if”之前。
$sides.slideToggle（）.addClass（'open'）；
}
});
});
li{
填充：20px；
边框：实心1px；
保证金：5px；
}
.广场{
显示：无；
边框：1px纯红；
}



悬停列表1
广场1


悬停列表2
广场2


悬停列表3
广场3


悬停列表4
广场4

谢谢msg和Patrik Alexits，非常感谢您分享您的经验！
$(document).ready(function () {
    $('li a').on('click', function(){
            $('.square').removeClass('active');
        $(this).siblings().addClass('active');
    });
});

li {padding:20px; border: solid 1px;margin:5px;}

.square {
  display: none;
  border: 1px solid red;
}
.active {
  display: block;
  border: 1px solid red;
}