Question

在我的菜单中，用户点击链接，列表会显示在.addClass( "show-nav" )。

以下是带有JS代码的jsFiddle：

jQuery(".nav-js-trigger").each(function(){
    this.onclick = function() {

        var hasClass;
        hasClass = jQuery(this).next().hasClass( "show-nav" );

        jQuery('.show-nav').removeClass('show-nav');

        if (hasClass === false) {
            jQuery(this).next().addClass( "show-nav" );
        }

    }
});

问题是：如果用户使用类show-nav点击div的外部，我希望删除该课程show-nav。 如何实现这一目标？

我见过e.target div ID但不是类的例子，尤其不是这样的情况。

Answer 1

这是通常的解决方案：

pthread_mutex_t number_mutex;
pthread_mutex_t result_mutex;
int number = 0;
int result = 0;

void  *term(int x) {
  float w;

  // Critical zone, make sure only one thread updates `number`
  pthread_mutex_lock(&number_mutex); 
  int mynumber = number++;
  pthread_mutex_unlock(&number_mutex);
  // end of critical zone 

  w = pow(x, mynumber)/factorial(mynumber);
  printf("%d term of series with x: %d  is: %f\n", mynumber, x, w);

  // Critical zone, make sure only one thread updates `result`
  pthread_mutex_lock(&result_mutex); 
  result += w;
  pthread_mutex_unlock(&result_mutex);
  // end of critical zone 

  return (void *)0;
}

Demonstration

这个想法是

从事件处理程序返回false以防止传播（您应该在大多数事件处理程序中执行此操作）
处理jQuery(".nav-js-trigger").click(function(){ var hasClass; hasClass = jQuery(this).next().hasClass( "show-nav" ); jQuery('.show-nav').removeClass('show-nav'); if (hasClass === false) { jQuery(this).next().addClass( "show-nav" ); } return false; }); $('.hidden').click(function(){ // you probably have something else here, it's a menu right ? return false; }); $(window).click(function(){ jQuery('.show-nav').removeClass('show-nav'); });上的点击事件以删除课程

此常见模式的一个变体是在显示菜单时在window上添加绑定，并在关闭菜单时将其删除。如果您不经常显示此菜单，那就更令人满意了。

Answer 2

绑定到文档，然后检查是否点击了锚点，点击了所显示元素内的某些内容，或者点击是否在外面

$(document).on('click', function(e) {
    var nav    = $(e.target).closest('.nav-js-trigger');
    var hidden = $(e.target).closest('.show-nav')

    if ( nav.length > 0 ) {
        $('.show-nav').not( nav.next().toggleClass('show-nav') ).removeClass('show-nav');
    } else if ( hidden.length === 0 ) {
        $('.show-nav').removeClass('show-nav');
    }
});

FIDDLE

Answer 3

添加此功能可以解决问题：

jQuery(document).mouseup(function (e) {
    if (!jQuery(".nav-js-trigger").next().is(e.target)) {
        jQuery(".nav-js-trigger").next().removeClass("show-nav");
    }
});

http://jsfiddle.net/ghLn4nmL/5/

希望这有帮助！

@dystroy建议修复的内容即使在菜单中单击也会删除该类。我的答案将允许用户在菜单中单击并关闭它。

Answer 4

您可以利用e.target和e.currentTarget来区分您点击的元素和其他元素。

e.currentTarget在以下情况下为#menu。

NB ：避免在each内附加事件处理程序。选择您感兴趣的元素并绑定click事件处理程序。

http://jsfiddle.net/ghLn4nmL/9/

jQuery("#menu").click(function(e) {
    var $target = $(e.target); //depends on the element you clicked on
    var isLink = $target.is('a.nav-js-trigger');
    if(isLink) {
        if(!$target.next('.hidden').is('.show-nav')) {
          $target.next('.hidden').addClass('show-nav').show();      
        }
    } else {
        //you click inside #menu but not on a.nav-js-trigger
        $(e.currentTarget).find('.hidden').hide().removeClass('show-nav'); //currentTarget = #menu
    }
});

Answer 5

我的方式 - http://jsfiddle.net/sergdenisov/3zc5yt2e/1/：

var $trigger = $('.nav-js-trigger');
var $hidden = $trigger.next();
var $all = $trigger.add($hidden);

$trigger.on('click', function() {
    $hidden.toggleClass('show-nav');
});

$(document.body).on('click', function(e) {
    if (!$(e.target).closest($all).length) {
        $hidden.removeClass('show-nav');
    }
});

Answer 6

这是一个将每个元素作为触发器抓取的，除了你不想点击的元素之外：

// for all elements...
$('html').click(function() {
  $('.show-nav').hide();  // hide the nav
});

// for the show-nav element
$('.show-nav').click(function(e) {
  e.stopPropagation(); //  prevent the default nav-closing action
  alert('inside the box');  // alert the inside click
});

// if you click on the button
$('.button').click(function(e) {
  e.stopPropagation(); // prevent the default nav-closing action
  $('.show-nav').show();  // re-open the nav
  });

.show-nav {
  background-color: lightblue;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-nav">Hello</div>
<br>
<button class="button" type="button">Reopen Nav</button>

为简洁起见：

$('html').click(function() {
  $('.show-nav').hide();
});
$('.show-nav').click(function(e) {
  e.stopPropagation();
  alert('inside the box');
});
$('.button').click(function(e) {
  e.stopPropagation();
  $('.show-nav').show();
  });

Answer 7

试试＆＃39; not＆＃39; jquery的选项：

$('html').not('.show-nav').click(function() {
    // your function here
}

如果单击元素外部，则切换

7 个答案: