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 nearest（）方法：

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();
        }
    });
 });

regex

jQuery - 单击“部分隐藏”但忽略内部部分单击时忽略

3 个答案: