爲什麼內部切換不能正常工作

我在切換內切換，但它無法正常工作。切換需要顯示只有div的類'點擊'（這也是切換），但有時你仍然可以點擊..也不總是工作時，它被點擊...我想我要去這完全錯了：這兒是我到目前爲止的代碼和小提琴明白我的意思 - fiddle 爲什麼內部切換不能正常工作

$(document).ready(function() { 
    $('.timelineTile').click(function (evt) { 
     evt.stopPropagation(); 
     $('.selected').children().not(this).removeClass('clicked'); 
     $(this).toggleClass('clicked'); 
     if ($('.selected').children().hasClass("clicked")) { 
      $('.details').addClass('show'); 
     } 
     if ($('.selected').children().hasClass("clicked")) { 
      $(this).children('.item').click(function (e) { 
       e.stopPropagation(); 
       $(this).siblings('.item-overlay').slideToggle('fast'); 
      }); 
     } 
     if ($('.selected').children().not("clicked")) { 
      $('.item-overlay').hide('fast'); 
     } 
    }); 
}); 

$(document).click(function() { 
    $('.timelineTile').removeClass('clicked'); 
    $('.details').removeClass('show'); 

    $('.item-overlay').hide('fast'); 
});

來源

2014-10-02 Zi_31

您在另一個事件處理程序內連接一個點擊處理程序（從來不是一個好主意）。每次代碼運行時它都會添加一個額外的函數調用。 – 2014-10-02 14:05:42

現有代碼似乎允許選擇多個切片。是這樣嗎？否則，可以減少很多代碼。 – 2014-10-02 14:22:11

我不確定我是否理解 - 它需要在點擊圖塊（變爲紅色）時執行 - 點擊功能「項目」（紫色）可以工作，並且白色的「項目疊加」可以切換。但只有點擊的區塊沒有其他區域。 – 2014-10-02 14:29:15

我不是100％肯定這是什麼例子的意思做，但你的內部佈線了點擊處理程序點擊處理程序。我已經感動的是外面和測試.selected祖先爲新委派的點擊處理程序中點擊小孩：

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/xmgb85p5/4/

$(document).ready(function() { 
    // Click a tile 
    $('.timelineTile').click(function (evt) { 
     console.log(".timelineTile click"); 

     // Stop the click propogating 
     evt.stopPropagation(); 

     // Remove clicked class from all other tiles and hide other overlays 
     $('.timelineTile').not(this).removeClass('clicked').find('.item-overlay').hide("fast"); 

     // Toggle the current tile clicked class 
     $(this).toggleClass('clicked'); 

     // If we are clicked, show details 
     if ($(this).hasClass("clicked")) { 
      $('.details', this).addClass('show'); 
     } 
    }).on('click', '.item', function (e) { 
     console.log(".item click"); 
     if ($(this).closest('.timelineTile').hasClass("clicked")) { 
      e.stopPropagation(); 
      $(this).siblings('.item-overlay').slideToggle('fast'); 
     } 
    }); 
}); 

$(document).click(function() { 
    $('.timelineTile').removeClass('clicked'); 
    $('.details').removeClass('show'); 

    $('.item-overlay').hide('fast'); 
});

如果這仍然不正確，請說明預期的行爲。

來源

2014-10-02 14:13:17

謝謝，但這不會在'timelineTile'內切換'item-overlay'。我希望當你打開'timelinetile'時，你可以點擊'item-overlay'項目，但只有在timelinetile打開時纔會這樣做 – 2014-10-02 14:18:08

謝謝@TrueBlueAussie這幾乎是正確的！然而，如果點擊另一個貼圖，「item-overlay」仍然可見，如果點擊另一個「timelineTile」，則需要關閉。 – 2014-10-02 14:43:08

我想我現在明白了。已更新，以清除點擊標誌並關閉所有*其他*圖塊的覆蓋圖。 – 2014-10-02 14:48:03

爲什麼內部切換不能正常工作

回答

相關問題