JQuery：將點擊功能添加到現有的切換器

-3

如何在點擊畫布時關閉此抽屜？此外，由於抽屜本身在畫布中，打開時抽屜也會關閉它嗎？這不會是可取的。任何幫助將是偉大的，謝謝！JQuery：將點擊功能添加到現有的切換器

$(function(){ 
    $('.toggle-nav').click(function(){ 
     toggleNav(); 
     }); 
    }); 
function toggleNav(){ 
    if ($('#site-wrapper').hasClass('show-nav')){ 
     // nav-close functions 
     $('#site-wrapper').removeClass('show-nav'); 
    } else{ 
     // nav-open functions 
     $('#site-wrapper').addClass('show-nav'); 
     } 
    }

http://jsfiddle.net/8s42f/

來源

2014-06-20 oceanic815

你所說的「抽屜」是什麼意思？ – Cristy

「點擊畫布時關閉此抽屜」 - Android的噱頭。 –

這應該做的伎倆：

http://jsfiddle.net/8s42f/3/

更新JS：

$(function() { 
    var $wrapper = $('#site-wrapper'); 
    function toggleNav (event) { 
     $wrapper.toggleClass('show-nav'); 
     event.stopPropagation(); 
    } 
    function hideNav (event) { 
     if (!$(event.target).is('#site-menu, #site-menu *')) 
      $wrapper.removeClass('show-nav'); 
    } 
    $('.toggle-nav').click(toggleNav); 
    $('#site-wrapper').click(hideNav); 
});

我做了以下修改：

替換重複查找爲#site-wrapper與緩存變量$wrapper
替換toggleNav()邏輯與jQuery的$.fn.toggleClass()方法
用於event.stopPropagation()以防止觸發$wrapper事件
新增hideNav()方法.toggle-nav點擊，它勢必$wrapper
在hideNav()中添加了檢查，以防止捕獲導航中的點擊。

希望這有助於！

來源

2014-06-20 20:11:04

你是一個JQuery God.I希望今晚有個美麗的女人給你自己。 – oceanic815

真的嗎？這可以讓你點擊'畫布'並關閉'抽屜'？ –

完美地工作。 – oceanic815

假設： - 帆布=文件 - 抽屜=＃站點包裝

設置你的點擊處理程序上document。如果點擊了#site-wrapper或其子以外的任何內容，「抽屜」將被關閉。

$(function() { 
    $(document).on('click', function (e) { 
     if (e.target.id === 'site-wrapper' || $(e.target).closest('#site-wrapper').length) { 
      e.stopPropagation(); 
      if (! $('#site-wrapper').hasClass('show-nav')) { 
       toggleNav(); 
      } 
     } else if ($('#site-wrapper').hasClass('show-nav')) { 
      toggleNav(); 
     } 
    }); 
}); 

function toggleNav() { 
    $('#site-wrapper').toggleClass('show-nav'); 
}

而且演示：http://jsfiddle.net/rodgolpe/8s42f/5/

來源

2014-06-20 20:15:38

JQuery：將點擊功能添加到現有的切換器

回答

相關問題