同时运行的链接和Div脚本HTML/JSF/JQuery

Question

我正在处理一个项目，这需要我有一个div，其中包含一些要编辑的项目，以及另一个div，这个div始终未显示。代码如下所示：

<div id="div1"> 
    <h:outputText value="Fixed Div" /> 
    <h:outputLink id="openDiv">Open Div</h:outputLink> 
    <div id="currentlyUnused">TODO</div> 
</div> 

<div id="div2"> 
    <h:outputText value="Other Div" /> 
    <div id="currentlyUnused2">TODO</div> 
</div> 

两个div的一些额外的CSS：

width: 400px; 
border: 2px solid #000000; 
text-align: center; 
position: absolute; 
background-color: white; 

还添加了div2：

z-index: 10; 
display: none; 

所以，我在尝试是打开div2当点击div1中的链接。我通过使用JQuery脚本发生了这种情况。这些脚本如下所示：

<script> 
    $("#openDiv").click(function() { 
     $("#div2").show("slow"); 
     $("#div1").animate({ 
      'marginLeft' : "-=30px" 
     }); 
     $("#div1").animate({ 
      'marginTop' : "-=20px" 
     }); 
    }); 
</script> 

<script> 
    $("#div1").click(function() { 
     $("#div2").hide("slow"); 
     $("#div1").animate({ 
      'marginLeft' : "+=30px" 
     }); 
     $("#div1").animate({ 
      'marginTop' : "+=20px" 
     }); 
    }); 
</script> 

的一个关闭div2是类似的，不同之处在于div2将关闭时div1（其伸出的一侧）被点击。他们有边界，所以我可以看到他们究竟如何移动等，但它只是造型相关，以及在div2（使其重叠等）的Z指数

虽然在手头上的问题。由于div动画，我注意到在屏幕上的运动，我知道我希望divs移动。当屏幕中间弹出div2时，div1将向上移动20px，剩余30px。当div2关闭，div1将20像素向下移动，而30像素的权利（到它的原始位置）

我注意到，当我点击链接打开div2，以下步骤发生：

1. div1移动30PX左
2. div1移动20像素高达
3. div2短暂打开
4. div2关闭
5. div1移动30PX权
6. div1移动20px的下降

这使我相信，当点击链接时两个脚本运行。我能想到的唯一可能的原因是点击脚本 - 无论是链接还是div都会同时触发。

我一直在坐，并尝试不同的组合，至于如何处理这个问题。我也尝试使用pointer-events来尝试解决问题，但迄今为止无济于事。

任何建议或帮助，将不胜感激

Answer 1

的问题是按钮的形式和都有一个jquery oncklick。 查询预先保存点击按钮作为点击div1 aswel。

修复此用法（事件。停止传播）：https://api.jquery.com/event.stoppropagation/

<script> 
    $("#openDiv").click(function(event) { 
     //Prevent click flowing into div1 
     event.stopPropagation(); 
     $("#div2").show("slow"); 
     $("#div1").animate({ 
      'marginLeft' : "-=30px" 
     }); 
     $("#div1").animate({ 
      'marginTop' : "-=20px" 
     }); 
    }); 
</script>