Question

我有一个元素，当你用鼠标悬停时会显示。现在我们要将其更改为单击而不是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上滑动。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

另一种方法是使用jquery获取位置并根据位置$(this).position().left

为其设置动画。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

将Mouseenter和Mouseleave更改为Click

1 个答案: