javascript - 单击页面时隐藏 div，除非单击特定 div

Question

当用户单击topic_tag_sug或其任何子元素时，该 div 不应隐藏。但是当用户点击任何其他元素时，topic_tag_sug应该隐藏。

HTML

<input id='topic_tag' onblur="$('#topic_tag_sug').hide();"/>
<div id='topic_tag_sug' style='border:1px solid #000'>here is tag suggestion zone, i want to click here to select tag suggestion, and it will not be hide</div>​

JavaScript

$('#topic_tag').focus();

http://jsfiddle.net/Q7hFw/2/

Answer 1

我很有趣，您想在其他事件中隐藏建议框。让我们在盒子内部添加一个关闭按钮，

<input id='topic_tag' />
<div id='topic_tag_sug' style='border:1px solid #000;display:none;'>
    here is tag suggestion zone, i want to click here to select tag suggestion, and it will not be hide
    <br>
    <a id="close" href="#">X: Close</a>
</div>

现在使用 jQuery 添加一些 javaScript 代码

$(document).ready(function() {
    $('#topic_tag').bind('click', function() {
        $('#topic_tag_sug').show();  
    });    
    $('#close').bind('click', function() {
        $('#topic_tag_sug').hide();
    });        
});

请在此处找到工作示例