对人体Click事件关闭工具提示 - 工作不正常

Question

我有了这个小提琴： http://jsfiddle.net/u8t77p75/

我要做到这一点，当我点击“身体”的JS将检查是否实际小费是可见的，如果这样隐藏的话。

我想尝试这样的：

if ($tooltipContainer.hasClass('active')) { 
 
\t $('body').click(function() { 
 
     $tipLink.triggerHandler('click'); 
 
\t }); 
 
}

它的工作原理，但并不完美。当我插入这段代码时，它会调用触发器，但我需要点击几次以打开或关闭。我认为这是因为整个点击函数get被调用。我需要做其他事吗？

Answer 1

您可以在文档中添加点击处理程序，以检查您是否在工具提示之外点击过，并且有一个处于打开状态。该代码是这样的：

$(document).click(function(e){ 
    if ($(e.target).not(':has(.lhde__tooltip)').length == 0 && $('div.opened').length) { 
     // current click target is not the tooltip and a tip is open 
     $('div.opened').remove(); 
    } 
}); 

你的代码的工作，但我会在popovers从引导看看，因为它更容易创建popovers。查看工作演示here

请在下面和这里找到您的代码在jsFiddle。

(function ($) { 
 
    'use strict'; 
 

 
    var $tipLink = $('.lhde__tooltip'), 
 
     $tipContent = $('.lhde__tooltip__content'); 
 

 
    //initial hide tipContent 
 
    $tipContent.hide(); 
 

 
    $tipLink.click(function (e) { 
 
     // prevent click event 
 
     e.preventDefault(); 
 

 
     var $clicked = $(this), 
 
      href = $(this).attr('href'), 
 
      $tooltipContainer = $(href); 
 

 
     // if a container with the id was found 
 
     if ($tooltipContainer.length) { 
 

 
      // if the tooltip is not already active 
 
      if (!$tooltipContainer.hasClass('active')) { 
 

 
       $tipContent.removeClass('active'); 
 
       $('.lhde__tooltip__content.opened').remove(); 
 

 
       $tooltipContainer.addClass('active'); 
 
       $clicked.append('<div class="lhde__tooltip__content opened">' + $tooltipContainer.html() + '</div>'); 
 

 
       // hide the tooltip 
 
      } else { 
 
       $tipContent.removeClass('active'); 
 
       $('.lhde__tooltip__content.opened').remove(); 
 
      } 
 
     } 
 
    }); 
 

 
    $(document).click(function(e){ 
 
     if ($(e.target).not(':has(.lhde__tooltip)').length == 0 && $('div.opened').length) { 
 
      // current click target is not the tooltip and a tip is open 
 
      //console.log($('div.opened')); 
 
      $('div.opened').remove(); 
 
      //$tipContent.removeClass('active'); 
 
     } 
 
    }); 
 
})(jQuery);

.content { 
 
    width: 150px; 
 
    background: #eee; 
 
    color: #333; 
 
    margin: 50px auto; 
 
} 
 
a { 
 
    color: black; 
 
    text-decoration: none; 
 
    display: block; 
 
    margin: 20px 0; 
 
    position: relative; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 
.lhde__tooltip__content { 
 
    position: absolute; 
 
    background: #333; 
 
    color: white; 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> <a class="lhde__tooltip" href="#kardiologen">Kardiologen</a> 
 
<a class="lhde__tooltip" href="#pneumologen">Pneumologen</a> 
 

 
</div> 
 
<div class="lhde__tooltip__content" id="kardiologen"> 
 
    \t <h3 class="lhde__third-headline">Kardiologen</h3> 
 

 
    <p class="lhde__paragraph">Lorem ipsum dollor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum soccis natoque penatabus et magais dis partiruent.</p> \t <span class="lhde__icon lhde__icon--close"></span> 
 

 
</div> 
 
<div class="lhde__tooltip__content" id="pneumologen"> 
 
    \t <h3 class="lhde__third-headline">Pneumologen</h3> 
 

 
    <p class="lhde__paragraph">Lorem ipsum dollor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum soccis natoque penatabus et magais dis partiruent.</p> \t <span class="lhde__icon lhde__icon--close"></span> 
 

 
</div>