关闭Body Click事件的工具提示-工作不正常

Close Tooltip on Body Click Event - not working properly

本文关键字：工作 不正常 工具提示 Body Click 事件 关闭      更新时间：2023-09-26

我有一把小提琴：http://jsfiddle.net/u8t77p75/

我想实现这一点，当我点击"body"时，js会检查是否有实际的提示可见，如果是，则隐藏它。

我想试试这样的东西：

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

它有效，但并不完美。当我插入这个片段时，它会调用触发器，但我需要单击几次才能打开或关闭。我认为这是因为整个点击函数get都被调用了。我需要做其他事情吗？

您可以在文档中添加一个点击处理程序，用于检查您是否在工具提示之外点击了，以及是否有一个打开的。代码如下：

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

您的代码可以工作，但我会从引导程序中查看popover，因为创建popover更容易。点击此处查看工作演示

请在下面和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">
    	<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>	<span class="lhde__icon lhde__icon--close"></span>
</div>
<div class="lhde__tooltip__content" id="pneumologen">
    	<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>	<span class="lhde__icon lhde__icon--close"></span>
</div>

相关文章：