Question

我有一个alphabeth表格，我希望在点击后显示/隐藏有关该字母的更多信息的气泡。我对jquery完全不熟悉，但我已经设法写下这个：

JS：

function toggle(id) {
  $('#' + id).slideToggle();
}

HTML：

<td>
  <a href="javascript:toggle('a')" onmouseover="this.innerHTML='A'" onmouseout="this.innerHTML='あ'">あ</a>
    <div id="a" class="bubble_table">
      <a href=""><div class="img_table"></div></a><p>[a], a </p>
    </div>
</td>

它的效果很好，但是现在我想点击页面上的其他地方后隐藏泡泡而且我被卡住了。有人可以告诉我如何编辑/重写功能来实现这一目标吗？可能是以最简单的方式？

非常感谢，Eva

Answer 1

尝试以下：

$(document).mouseup(function (e)
    {
        var container = $(".bubble_table");
        if (container.has(e.target).length === 0)
        {
            container.hide();                
        }
    });

我希望它有所帮助。

Answer 2

应避免使用内联事件。不要以这种方式绑定事件。使用javascript或jQuery完成工作。为锚元素添加了一个类。并将要显示的文本存储在 HTML-5 data- * attributes

中

<强> HTML

<tr>
    <td> <a href="" data-before="あ" data-after="A" class="bubble">あ</a>

        <div id="a" class="bubble_table"> <a href=""><div class="img_table"></div></a>

            <p>[a], a</p>
        </div>
    </td>
    <td> <a href="" data-before="あ" data-after="B" class="bubble">あ</a>

        <div id="b" class="bubble_table"> <a href=""><div class="img_table"></div></a>

            <p>[b], b</p>
        </div>
    </td>
    <td> <a href="" data-before="あ" data-after="C" class="bubble">あ</a>

        <div id="c" class="bubble_table"> <a href=""><div class="img_table"></div></a>

            <p>[c], c</p>
        </div>
    </td>
</tr>

<强>的Javascript

$(document).on('click', function(e) {
    e.preventDefault();
    var $this = $(e.target);
    if($this.closest('td').length) {
        if($this.hasClass('bubble') ) {
            var $currBubble = $this.next('.bubble_table')
            $currBubble.slideToggle();  
            $('.bubble_table').not($currBubble).slideUp();
        }
    }
    else {
        $('.bubble_table').slideUp();
    }
});

$('.bubble').on({ 
    mouseover : function() {
        $(this).text(function(_,txt) {
            return $(this).data('after');
        });
    },
    mouseout: function() {
        $(this).text(function(_,txt) {
            return $(this).data('before');
        });
    }

});

<强> Check Fiddle

Answer 3

我使用了maverickosama92的功能，因为它的简单性，并将“.hide”替换为“.slideUp”，正如Sushanth所建议的，因为它具有良好的视觉效果。感谢你们两位，这很有效： - ）

jquery - 在外面点击时隐藏各种div

3 个答案: