Question

我正在尝试创建一个可扩展的翻转，但要与内部元素进行交互。所以我在这里有一个可扩展的div，当扩展时，另一个div显示为“x”。我想要的是当我点击#wrap进入谷歌时，当我点击#button继续雅虎。你怎么看，现在如果我超过“x”我将走出#wrap区域并以鼠标移动。知道如何解决这个问题吗？

https://jsfiddle.net/Ln6q9q9b/

<script>
$(document).ready(function() {
  $("#wrap").hover(
    //on mouseover
    function() {
      $(this).animate({height: '+=250'}, 'slow');
      $('#button').css('display', 'block');
      expanded = true;
      console.log("expanded is " + expanded);
    },
    //on mouseout
    function() {
      $(this).animate({height: '-=250px'}, 'slow');
      $("#button").hide();
      expanded = false;
      console.log("expanded is " + expanded);
    }
  );
  $('#wrap').on('click', function(){
    window.open('http://google.com', 'click', 'window settings');
    return false;
    console.log('click');
  });
  if(expanded = true){
    $("#button").on('click', function(){
        window.open('http://yahoo.com', 'click', 'window settings');
        return false;
      });
  };

});
</script> 

<style type="text/css">
#wrap{
  width: 900px;
  height:50px;
  overflow:hidden;
  background: black;
}
#button{
  position: absolute;
  color: white;
  left: 10;
  top: 10;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
</style>

<body>
<div id="wrap">
</div>
<div id="button">X</div>
</body>

Answer 1

不是100％肯定你想要实现的目标，而是看看relatedTarget。

对于mouseout，表示正在输入的元素;用于鼠标悬停，表示要退出的元素。

您的mouseout听众可以添加

function (evt) {
    if(evt.relatedTarget.id === "button") return;
    $(this).animate({height: '-=250px'}, 'slow');
    //etc;
}

以下似乎有效

$(document).ready(function() {
  var expanded = false;
  $("#wrap").hover(
    //on mouseover
    function() {
      if (expanded) { return; }
      $(this).animate({height: '+=250'}, 'slow');
      $('#button').css('display', 'block');
      expanded = true;
      console.log("expanded is " + expanded);
    },
    //on mouseout
    function(evt) {
      if (evt.relatedTarget.id === "button") { return; }
      $(this).animate({height: '-=250px'}, 'slow');
      $("#button").hide();
      expanded = false;
      console.log("expanded is " + expanded);
    }
  );
  $('#wrap').on('click', function(){
    window.open('http://google.com', 'click', 'window settings');
    return false;
    console.log('click');
  });
  $("#button").on('click', function(evt){
      window.open('http://yahoo.com', 'click', 'window settings');
      return false;
  });
});

我已将if (expanded) { return; }添加到鼠标悬停监听器，并完全删除了if (expanded = true)检查。

Answer 2

如果我理解你的话，你需要做的就是将#button放在#wrap div中。

<div id="wrap"><div id="button">X</div></div>

保持其余部分相同，它似乎可以按你的意愿工作。

Answer 3

在wrap内添加按钮。

将position: relative;提交给wrap.

https://jsfiddle.net/afelixj/Ln6q9q9b/1/

翻转时如何与元素交互？

3 个答案: