如何通过点击任何地方关闭内容但排除内容本身？

Question

当我点击自己时，我无法让内容保持开放状态。当我点击触发它的按钮并在任何地方点击它（它是正确的）时它会关闭。我定位该文档，因为我将根据不同的标记元素具有不同的功能。

如何在点击内容本身时阻止内容关闭？

JsFiddle

的Javascript

$( document ).on( "click", function( event ) {

// Add internal reference
$( ".target-2" ).addClass( "gStarter" );
$( ".content-col" ).addClass( "gColumn" );


// Check if the elem been clicked has target-2 as class
// and if the tag name matches a button tag
if( $(event.target).hasClass( "target-2" ) && $( event.target ).prop( 'tagName' ) == "BUTTON" ){

    // Add active class if it doesn't have it
        if( ! $( ".target-2" ).parent().next().children().hasClass( "active" ) ){

            // Make sure there won't be any content activated
                    //$( ".gColumn" ).removeClass( "active" );
        //$( ".gStarter" ).removeAttr( "data-starter" );
        // Add active class
        $( ".target-2" ).parent().next().children().addClass( "active" );     
  } else {
      /*
       * Already have active class
       */

      // Hide content by removing the class
      $( ".target-2" ).parent().next().children().removeClass( "active" );
      // Remove data-starter attribute
      $( ".target-2" ).removeAttr( "data-starter" );
    }

} else {

  // Find and get the first class by targeting its data-starter attribute
  //var find = $('[data-starter="starter-active"]');
 // var getClass = $(find).attr('class').toString().split(' ')[0];


  if ( ! $( ".target-2" ).closest().parent().next().children().is( event.target )) {

    if ( $( ".target-2" ).parent().next().children().is(':visible')) {

      $( ".target-2" ).parent().next().children().removeClass( "active" );
    }
  }     

}

});

HTML

<div class="host">
 <div class="btn-container">
   <button type="button" data-starter="starter-active" class="target-2 target">Click here</button>
 </div>
 <div class="button-row row">
   <div class="button-col content-col">
     <span>This content is triggered by a button - ID: 13</span>
   </div>
 </div>
</div>

Answer 1

如果目标位于该内容类

，请使用closest('.contentClassName')和返回

$( document ).on( "click", function( event ) {

    if($(event.target).closest('.button-row').length){
       return; /// don't go any further
    }
    // other code is same

的 DEMO

Answer 2

为什么不检查目标是否具有特定的类名？

例如，将类名添加到

<div class="button-row row my-content" />

然后检查$（event.target）.hasClass（'my-content'）。

此外，您可以使用数据属性动态制作。

在点击此处按钮上添加数据属性。像这样：

<div data-content-target="my-content">Click Here</div>

然后，在javascript中，而不是遍历DOM树（parent（）。next（）。children（）。addClass（）），只需选择元素并添加活动类，如下所示：

var targetContent = $(".target-2").data("content-target");
$("." + targetContent).addClass("active");

这是一种更好的方法，原因很多，但首先，它会大大降低代码的复杂性。