你好，我有一个名为"bar"的div，其中包含一个矩形的SVG文件.这个矩形的宽度约为160px，高度约为60px，笔划为4px，圆角.当用户双击绿色正方形时，我希望矩形在Y轴上向下扩展，大约向下扩展100px，以显示名为"Circle"的div.当用户再次双击时，我希望矩形向上滚动到原始大小，隐藏圆形div.我曾try 在css中使用Transform:scaleY()，但它包装了我的矩形，并且我不知道如何将css连接到onClick js函数.有谁能帮忙吗？
const divItem = document.getElementById('divItem');
divItem.addEventListener('click',(e)=>{
//when the user clicks the square I want the bar to expand downward to reveal the circle div//
})#divItem{
width: 150px;
height: 150px;
background-color: green;
cursor: pointer;
position: relative;
left: 55px;
}
/*.bar{
transform: scaleY(3);
}*/
.circle{
width: 50px;
height: 50px;
clip-path: circle();
background-color: blue;
position: absolute;
left: 55px;
visibility: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Double Click Drop down</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="divItem"></div>
<div class="bar">
<img src="SVG/bar.svg">
</div>
<div class="circle"></div>
<script src="./script.js"></script>
</body>
</html>