3

我有一个字母表，我想在单击它后显示/隐藏包含有关该字母的更多信息的气泡。我对 jquery 完全陌生，但我设法写下了这个：

JS：

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

HTML：

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

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

非常感谢，伊娃

4

3 回答 3

2

尝试以下：

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

我希望它有帮助。

于 2013-08-05T07:19:58.163 回答
1

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

HTML

<tr>
    <td> <a href="" data-before="あ" data-after="A" class="bubble">あ&lt;/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">あ&lt;/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">あ&lt;/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');
        });
    }

});

检查小提琴

于 2013-08-05T07:26:34.340 回答
0

我使用了 maverickosama92 的功能，因为它很简单，并按照 Sushanth 的建议将“.hide”替换为“.slideUp”，因为它具有很好的视觉效果。效果很好，多亏了你们两个:-)

于 2013-08-05T07:45:00.967 回答