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

Question

我正在尝试使用 javascript 构建一个从浏览器窗口右侧扩展出来的面板，其中将保存信息。我已经设法让 div 在点击时展开，但我需要它在悬停时展开，并且还需要在角落里用 x 关闭以恢复其原始状态。

http://jsfiddle.net/8zGp9/

我希望这很清楚，我的 Fiddle 在上面。

<div> </div>

Answer 1

使用hover。第一个函数将在悬停时执行，第二个函数将在悬停时执行。见example

$("#slidingpanel").hover(function(e){
    $(this).animate({
        width: 200
    },100);
},function(e){
    $(this).animate({
        width: 30
    },100);
});

如果你只想在点击时关闭你的 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);
});

Working example

我把 X 放在外面是因为如果它在里面，一旦你点击它并移动鼠标，悬停就会再次触发。

Answer 2

使用jQuery的悬停功能。该代码只是一个示例，您需要修复 x 位置并处理 div 宽度：http://jsfiddle.net/8zGp9/4/

html:

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

css:

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

js:

$("#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);
 }