Question

我已经看到了这个解决方案的一些答案，但似乎无法让他们中的任何一个为我工作。我有一个嵌套在div＆＃39;＃dashboard＆＃39;中的导航。当用户单击打开/关闭div时，它会上下滑动。

当用户点击除#dashboard div之外的页面上的任何位置时，我希望将其向上滑动并隐藏。

这就是我所拥有的：

$('.open').on('click',function(){
   $('#dashboard').slideToggle();
});

我试过这个（无济于事）：

$('body').click(function() {
    $('#dashboard').slideUp();
});

这是标记：

<hgroup id="logo-menu">
<div id="dashboard">
    <nav role="navigation" id="main-nav" class="site-navigation main-navigation collapse navbar-collapse">
        <?php $walker = new Menu_With_Description; ?>
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
     </nav><!-- .site-navigation .main-navigation -->
</div> <!-- #dashboard -->

<a><div class="open"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/menu-down.png"></div></a>
</hgroup> <!-- .logo-menu -->

想知道是否有人可能会对像我这样的noobie解释这一点。

谢谢！

Answer 1

您可以使用事件参数e检查目标元素：

<强>更新

你可以使用e.stopPropagation()来阻止事件从dom冒泡，所以你的破解就是这样：

$('.open').on('click',function(e){
   e.stopPropagation(); 
   $('#dashboard').slideToggle();
});

$(document).click(function(e) {
   if($(e.target).closest('div#dashboard').length == 0)
       $('#dashboard').slideUp();
});

当您点击链接时，它将检查类名称，当您单击仪表板div的任何元素时，它将检查点击的元素仪表板的父元素是否存在于dom中。

当用户点击页面上的任何位置时滑动div

1 个答案:

Updated Fiddle