jQuery切換隱藏選擇器

我想要使用jQuery toggle()函數在單擊元素（#mobileMenu）時從左側滑動屏幕外div（#mobileNav），然後再次單擊該元素時，div滑動關閉再次屏幕。我已經在點擊滑動工作，但觸發元素然後隱藏 - 一個display: none被注入標籤 - 這使得不可能再次點擊滑動div退出。下面是相關的代碼：jQuery切換隱藏選擇器

$(document).ready(function(){ 
    $('#mobileMenu').click(function() { 
     $("#mobileMenu").toggle(function() { 
      $('#mobileNav', this).animate({left: '0' }); 
     }, function() { 
      $("#mobileNav", this).animate({left: '-380px'}); 
     }); 
    }); 
});

#mobileNav最初設置爲left: -380px。

<div class="mobile-menu-icon"> 
    <p><a id="mobileMenu" href="#">&#9776;</a></p> 
</div>

答案可能會使用範圍，但我似乎無法理解它是如何工作的。

一如往常 - 感謝您的任何和所有幫助 - 喬

來源

2016-05-08 Joe Lowery

'toggle'事件方法已被棄用並從最新版本的jQuery中刪除。該方法可能是「切換」效果方法，它做了不同的事情。它顯示/隱藏一個元素。 – undefined

的問題是因爲toggle()方法不再在你期望的方式工作。 '功能之間切換'簽名是deprecated in 1.8 and removed in 1.9。

相反，您需要自己處理行爲的變化。在這種情況下，通過檢查元素的當前left位置：

$('#mobileMenu').click(function() { 
    $(this).toggle(function() { 
     var leftPos = parseInt($(this).css('left'), 10) == 0 ? '-380px' : 0; 
     $('#mobileNav').animate({ left: leftPos }); 
    }); 
});

另外，優選的，你可以在CSS中執行動畫，只需使用toggleClass來觸發它：

#mobileNav { 
    left: 0; 
    transition: left 0.5s; 
} 
#mobileNav.open { 
    left: -380px; 
}

$('#mobileMenu').click(function() { 
    $('#mobileNav').toggleClass('open'); 
});

最後，請注意，使用上下文id選擇器（$("#mobileNav", this)）是多餘的，因爲id屬性在文檔中應該是唯一的，因此上下文選擇器沒有實際意義。

來源

2016-05-08 20:11:19

謝謝，羅裏。我採用了另一種方法 - 更清潔！我最終扭轉了左邊的值，因爲我想讓默認值在屏幕外，但是效果很好。乾杯!另外，非常感謝關於棄用的解釋。這就解釋了爲什麼我一直在閱讀衝突的描述。 –

沒問題，很高興幫助 –

jQuery切換隱藏選擇器

回答

相關問題