同時運行的鏈接和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>