Javascript 滚动时如何与元素交互？

我试图创建一个可扩展的滚动，但与内部元素交互。所以我这里有一个可展开的div，当它展开时，另一个div显示为“x”。我想要的是当我点击#wrap进入谷歌，当我点击#按钮进入雅虎。你怎么看，现在如果我超过了“x”，我就会离开包裹区，变成老鼠。你知道怎么解决这个问题吗

$（文档）.ready（函数（）{
$（“#包裹”）。悬停(
//鼠标悬停
函数（）{
$（this.animate（{height:'+=250'}，'slow'）；
$（'按钮'）.css（'显示'，'块'）；
扩展=真；
console.log（“扩展为”+扩展）；
},
//论慕斯奥特
函数（）{
$（this.animate（{height:'-=250px'}，'slow'）；
$（“#按钮”）.hide（）；
扩展=假；
console.log（“扩展为”+扩展）；
}
);
$（'#wrap'）。在（'单击'，函数（）上）{
打开窗户http://google.com“，”单击“，”窗口设置“）；
返回false；
console.log（'click'）；
});
如果（扩展=真）{
$（“#按钮”）。在（'单击'，函数（）上{
打开窗户http://yahoo.com“，”单击“，”窗口设置“）；
返回false；
});
};
});
#包裹{
宽度：900px；
高度：50px；
溢出：隐藏；
背景：黑色；
}
#钮扣{
位置：绝对位置；
颜色：白色；
左:10 ;；
排名前10名；
宽度：10px；
高度：10px；
光标：指针；
}
X

不是100%确定你想要实现什么，但是看看

对于mouseout，表示正在输入的元素；对于mouseover， 指示要退出的元素

您可以向

鼠标输出

侦听器添加

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）

检查全部内容。

如果我理解正确，只需将#按钮放在#wrap div中即可

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

X

---

其余部分保持不变，它似乎可以根据您的需要工作。

将按钮添加到

wrap

中

并给出

位置：相对到
换行。

if（expanded=true）{
应该是
if（expanded==true）{
或者甚至只是
if（expanded）
。是的，它应该是
if（expanded）
——另外，你已经在mouseout上注释了
//在mouseover上注释了
//这不是jQuery的。hover（）方法确实如此。您应该在此处仔细阅读：--但看起来您离所要搜索的结果相差很远。是否希望菜单不断地上下移动？对我来说，这似乎是一场噩梦。虽然这可以解决OP描述的问题，但它会产生另一个问题，即单击#按钮将冒泡到#结束。操作对于点击事件，#按钮需要有
函数（e）{e.stopPropagation（）；[和现有的js]}
<div id="wrap"><div id="button">X</div></div>