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：将点击功能添加到现有的切换器

回答

相关问题