Javascript 将Mouseenter和Mouseleave更改为单击

我有一个元素，当你用鼠标悬停时会显示出来。现在我们要将其更改为单击，而不是鼠标输入或-离开。我们所拥有的：

$('#element').mouseenter(function(){
$(this).stop().animate({'left': '0px'}, 500);
}).mouseleave(function(){
$(this).stop().animate({'left': -($('#element').width()-10)}, 500);
});

HTML

<div class="element" id="element"> </div>

我们尝试将其更改为此，但这不起作用：

$('#element').click(function(){
$(this).stop().animate({'left': '0px'}, 500);
}).mouseleave(function(){
$(this).stop().click({'left': -($('#element').width()-10)}, 500);
});

---

我们只想在单击时滑开，然后再次单击时滑出，而不是像现在这样在MouseeEvent上。

一种方法是使用布尔值来知道它是否在可见位置，然后切换布尔值，

var left=false


var left=false；
$（'#元素'）。单击（函数（）{
如果（左）{
$（this）.stop（）.animate({
“左”：“0px”
}, 500);
左=假；
}否则{
$（this）.stop（）.animate({
'左'：-（$（'#元素'）.width（）-10）
}, 500);
左=真；
}
});
.element{
位置：固定；
顶部：0px；
左：0px；
身高：100%；
z指数：1000；
}

元素
一种方法是使用布尔值来知道它是否在可见位置，然后切换布尔值，
var left=false


var left=false；
$（'#元素'）。单击（函数（）{
如果（左）{
$（this）.stop（）.animate({
“左”：“0px”
}, 500);
左=假；
}否则{
$（this）.stop（）.animate({
'左'：-（$（'#元素'）.width（）-10）
}, 500);
左=真；
}
});
.element{
位置：固定；
顶部：0px；
左：0px；
身高：100%；
z指数：1000；
}

元素
您试过了吗？尝试一下，看看它是否有效。你希望它是“单击并单击”还是“单击并鼠标移动”？另外，共享一些HTML，这样我们就可以更好地了解当你单击element@epascarello点击点击你试过了吗？尝试一下，看看它是否有效。你希望它是“单击并单击”还是“单击并鼠标移动”？另外，共享一些HTML，这样我们就可以更好地了解当你单击element@epascarello点击并点击
$('#element').click(function(){
$(this).stop().animate({'left': '0px'}, 500);
}).mouseleave(function(){
$(this).stop().click({'left': -($('#element').width()-10)}, 500);
});