Javascript 通过关闭按钮折叠和打开div

我正在尝试使用javascript构建一个面板，该面板将从浏览器窗口的右侧展开，其中包含信息。我已经设法让div在单击时展开，但我需要它在悬停时展开，并在角落中用x关闭以返回其原始状态

我希望这是清楚的，我的小提琴在上面

<div> </div>

---

使用

悬停

。第一个函数将在鼠标悬停时执行操作，第二个函数将在鼠标悬停时执行操作。看

如果要在单击“仅”时关闭div，可以尝试以下操作：

$("#slidingpanel").hover(function(e){
    $(this).animate({
        width: 200
    },100);
    $("#closeButton").css("display", "inline-block");    
});

$("#closeButton").click(function(){
    $("#slidingpanel").animate({
        width: 30
    },100);
    $(this).css("display", "none").delay(200);
});

---

我将X定位在外部，因为在单击并移动鼠标后，如果它位于内部，将再次触发悬停。

使用jQuery的悬停功能。代码只是一个示例，您需要修复x位置并处理div宽度：

html:

js:

---

您好，在小提琴中，它似乎非常不稳定，似乎可以随意打开和关闭。通过将扩展区域调整到10px，打开是很好的，但是div不能正确关闭，除非它是完美的！谢谢，干得好

$("#slidingpanel").hover(function(e){
    $(this).animate({
        width: 200
    },100);
    $("#closeButton").css("display", "inline-block");    
});

$("#closeButton").click(function(){
    $("#slidingpanel").animate({
        width: 30
    },100);
    $(this).css("display", "none").delay(200);
});

<div id="slidingpanel">  
        <div id="closepanle">x</div>
</div>

#slidingpanel {
position: fixed;
width: 30px;
height: 200px;
z-index: 1;
right: 0px;
border:1px solid black;
}
#closepanle{
   position: inherit; 
   cursor:pointer;
   top:1;
}

$("#slidingpanel").hover(function(){
  expandDiv(this);
 });
$("#closepanle").click(function(){
    closeDiv("#slidingpanel");
});

 function expandDiv(selector){    
    $(selector).animate({
        width: 200
    },100);
 }

 function closeDiv(selector){    
    $(selector).animate({
        width: 30
    },100);
 }