从悬停更改为点击？ [英] Changing from hover to click?

问题描述

我最近在我的网站的底部实现了一个小盒子，当鼠标悬停在其上时展开...这是代码，一切都很好。

CSS

  #box { 
 position：absolute; 
 width：300px; 
 height：20px; 
 left：33％; 
 right：33％; 
 min-width：32％; 
 bottom：0; 
 background-color：＃353535; 
} 
  

javascript

  $（'＃box'）。hover（function（）{
 $（this）.animate（{
 height：'220px '
}，150）; 
}，function（）{
 $（this）.animate（{
 height：'20px'
}，500）; 
}）; 
  

但我很好奇我会如何改变这个点击打开和关闭，

 
 code> $（'＃box'）。click（function（）{
 $（this）.animate（{
 height：'220px'
}，150）; 
}，function（）{
 $（this）.animate（{
 height：'20px'
}，500）; 
}）; 
  

这样可以打开盒子。但我无法再次点击重新关闭。

这么接近到目前为止！ ：P

解决方案

这应该起作用

  $（'＃box'）。toggle（function（）{
 $（this）.animate（{
 height：'220px'
}，150）; 
}，function（）{
 $（this）.animate（{
 height：'20px'
}，500）; 
} 
  

I've recently implemented a small box on my website at the bottom of the page to expand when the mouse hovers over it... This is the code and it all works great.

CSS

#box{
    position:absolute;
    width:300px;
    height:20px;
    left: 33%;
    right: 33%;
    min-width: 32%;
    bottom:0;
    background-color: #353535;
}

javascript

$('#box').hover(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

But I'm curious about how I would go about changing this to open and close on a click rather than the mouse hovering over it?

I've edited it to...

$('#box').click(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

And this works to open the box. But I can't get it to close again with another click.

So close yet so far! :P

解决方案

this should work

$('#box').toggle(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

这篇关于从悬停更改为点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！