jQuery - 单击部分隐藏但忽略内部部分点击

Question

$(document).ready(function() { 
    var $inners = $('.workSect .innerSect'); 
    $(".workSect").click(function() { 
    var $inner = $(this).find('.innerSect'), 
     visible = $inner.is(':visible'); 
    $inner.css({ 
     'visibility': visible ? 'hidden' : 'visible', 
     'display': visible ? 'none' : 'block' 
    }); 
    $inners.not($inner).hide(); 
    }); 
}); 

我有这段代码。它在外部部分点击时显示并隐藏内部部分。带有“innerSect”类的内部部分位于外部部分内部，类为“outerSect”

该代码的工作原理除了一件事情以外，当内部部分被点击时，它关闭。这是技术上应该做的，因为内部部分位于外部部分内部并且点击外部部分是打开和关闭内部部分的内容。

我想要的是让它在点击时忽略内部部分。如果可能的话。 也许制作一个列表而不是章节？ 这里是JSFiddle.

Answer 1

你可以检查事件目标（你点击的元素）是否有父母具有.innerSect类，或者如果目标本身是.innerSect;

您可以用jQuery做最接近（）方法：

var $target = $(event.target); 
if($target.closest('.innerSect').length){ 
    return false; 
} 

这里是一个小提琴：https://jsfiddle.net/zvjpoqyx/1/

然而，在你的情况，你可以听在H2元素的点击次数。

Answer 2

像这样的东西应该这样做：

$('.workSect').click(function(event){ 
    if(!$('.innerSect').has($(event.target))){ 
    // closing code 
    } 
    else { 
    // don't close 
    } 
}); 

Answer 3

这应做到：

$(document).ready(function() { 
    var $inners = $('.workSect .innerSect'); 
    $(".workSect").click(function(e) { 
     if(!$(e.target).closest('.workSect,.innerSect').is('.innerSect')) { 
      var $inner = $(this).find('.innerSect'), 
       visible = $inner.is(':visible'); 
      $inner.css({ 
       'visibility': visible ? 'hidden' : 'visible', 
       'display': visible ? 'none' : 'block' 
      }); 
      $inners.not($inner).hide(); 
     } 
    }); 
}); 

DEMO