Question

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

我希望这很清楚，我的小提琴就在上面。

<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);
 }

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

2 个答案: