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