如何防止點擊事件相互重疊？

Question

請查看下面的圖片以了解錯誤：

如圖所示，有沖突的文本。 網站的初始狀態有6個塊，每個塊帶有不同的顏色，中間帶有文本。 單擊時，中間部分顯示更多信息。 但是，當您單擊另一個框時，背景色會更改，並且/或者每個框內的文本都會顯示或隱藏。

我懷疑這是由於我對jQuery的錯誤使用而發生的

Answer 1

我嘗試修復它，但是仍然無法正常工作，因為您必須單擊打開該字段所用的字段，然后再次將其關閉。 您應該為結束圖標構建一個點擊處理程序，然后它應該可以工作。

https://codepen.io/felixhaeberle/pen/qGjpVJ

首先，我檢查每個項目是否被阻止，如果被阻止，則返回。 然后，我將所有項目設置為“已阻止”，然后取消阻止當前（此）項目。 關閉點擊處理程序（關閉圖標）應刪除所有被阻止的條目，例如$('.closing-link').click(function(){ allItems.toggleClass("blocked"); // your closing code follows here });

  $("#fbPageDesign").on('click', function(){
    if ($(this).hasClass("blocked")) return;
    allItems.toggleClass('blocked');
    $(this).toggleClass("blocked");
    $(".box").toggleClass("bg-color2");
    $(".boxText,.whiteRectangle").toggle();
  });

我的解決方案中的摘要。