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

我有一个alphabeth表，我想在点击它之后显示/隐藏更多关于该字母的信息。我完全新的jQuery的，但我已经成功地写下这样的：jquery - 在外部点击时隐藏各种div

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>

它的伟大工程，但现在我想的在点击页面上的其他位置后隐藏气泡，然后卡住。有人可以告诉我如何编辑/重写功能来实现这一目标吗？可能以最简单的方式？

非常感谢，伊娃

来源

2013-08-05 Eva

做所有的泡泡有bubble_table类吗？ –

尝试以下操作：

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

我希望它能帮助。

来源

2013-08-05 07:19:58 maverickosama92

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

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

来源

2013-08-05 07:26:34

href不能为空 –

@ABFORCE。你是这么认为的吗？它可以是空的 –

html5验证 –

由于其简单性，我使用了maverickosama92的功能，并且由Sushanth建议的“.hide”替换为“.slideUp”，因为它具有很好的视觉效果。它工作得很好，谢谢你们两位:-)

来源

2013-08-05 07:45:00 Eva

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

回答

相关问题