當ul可見時將一個事件附加到身體上，然後在不可見時將其刪除

Question

我有一個<ul>，點擊後可切換另一個<ul>的可見性。當發現<ul> s時，我如何將活動附加到頁面正文以便身體隱藏<ul>。

我是新來寫這些泡沫的東西，我不明白爲什麼我迄今爲止所做的似乎間歇性地工作。點擊幾次後，打開第二個<ul>時無法添加類open。

當然，可能有一個完全更好的方法來做到這一點。

$(document).on('click', '.dd_deploy', function (e) { 
    var ul = $(this).children('ul'); 
    var height = ul.css('height'); 
    var width = ul.css('width'); 
    ul.css('top', "-" + height); 
    ul.fadeToggle(50, function() { 

     //add open class depending on what's toggled to 
     if (ul.hasClass('open')) { 
      ul.removeClass('open'); 
     } else { 
      ul.addClass('open'); 
     } 
     //attach click event to the body to hide the ul when 
     //body is clickd 
     $(document).on('click.ddClick', ('*'), function (e) { 
      e.stopPropagation(); 
      //if (ul.hasClass('open')) { 
       ul.hide(); 
       ul.removeClass('open') 
       $(document).off('click.ddClick'); 
      // } 
     }); 
    }); 
});​ 

http://jsfiddle.net/JYVwR/

Answer 1

我建議在點擊事件不綁定click事件，即使你取消綁定它。相反，我會做這種方式：

http://jsfiddle.net/JYVwR/2/

$(document).on('click', function (e) { 
    if ($(e.target).is(".dd_deploy")) { 
     var ul = $(e.target).children('ul'); 
     var height = ul.css('height'); 
     var width = ul.css('width'); 
     ul.css('top', "-" + height); 
     ul.fadeToggle(50, function() { 

      //add open class depending on what's toggled to 
      if (ul.hasClass('open')) { 
       ul.removeClass('open'); 
      } else { 
       ul.addClass('open'); 
      } 
     }); 
    } 
    else { 
     $('.dd_deploy').children('ul:visible').fadeOut(50,function(){ 
      $(this).removeClass("open"); 
     }) 
    } 
});​ 

如果您需要進一步防止單擊打開的菜單上從關閉菜單，添加一個else如果測試該菜單的孩子。

Answer 2

你不'真的需要所有的代碼。所有你需要的是jquery的toggle類來完成你想要的。下面的簡單代碼應該可以工作。

$(document).ready(function() { 
    $('ul.dd_deploy').click(function(){ 
     $('ul.dd').toggle(); 
    }); 
});​​​​ 

首先，你是一個document.on功能是根本錯誤的內限定document.on功能

示例代碼，你只需要一次檢查，一旦文檔準備好執行的功能。

其次爲什麼你想綁定一個事件到body.click？這不是一個好主意。

建議

我想你也應該看看hover功能可能在這種情況下對你有用。

工作小提琴

JSfiddle與點擊功能 JSfiddle與懸停功能