javascript - 关闭主体点击事件上的工具提示 - 无法正常工作

Question

我有这个 fiddle : http://jsfiddle.net/u8t77p75/

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

我想尝试这样的事情:

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

它可以工作，但并不完美。当我插入此代码片段时，它会调用触发器，但我需要单击几次才能打开或关闭。我认为这是因为整个点击功能被调用。我还需要做其他事情吗？

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来自 bootstrap，因为创建弹出窗口更容易。查看工作演示 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">
    	<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>