javascript - 将Mouseenter和Mouseleave更改为Click

我有一个元素，当您将鼠标悬停时会显示出来。现在，我们想将其更改为单击，而不是mouseenter或-leave。我们有什么：

$('#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>

CSS

.element {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: 1000;
}

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

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

我们只想在单击时滑动打开并在再次单击时滑出，而不是像现在这样在mouseevent上滑动。

最佳答案

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

var left = false;
$('#element').click(function() {
  if (left) {
    $(this).stop().animate({
      'left': '0px'
    }, 500);
    left=false;
  } else {
    $(this).stop().animate({
      'left': -($('#element').width() - 10)
    }, 500);
    left=true;
  }
});

.element {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  z-index: 1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element" id="element">Element</div>

另一种方法是使用jquery获取位置并根据位置$(this).position().left对其进行动画处理

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

.element {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  z-index: 1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element" id="element">Element</div>

关于javascript - 将Mouseenter和Mouseleave更改为Click，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39411365/