除切换内容外，关闭页面上任何位置的切换div

Question

我正在努力切换一个div，当我单击ID为#togglesearch的链接时，我所拥有的一切都工作正常，但我想要的是能够关闭当我单击任意位置时已切换的可见div在页面上（已切换的div除外）。

这是我目前所拥有的：

    <script type="text/javascript">
jQuery(document).ready(function($){

jQuery('#togglesearch').click(function() {
        jQuery('.toggle-search').slideToggle('fast');
        return false;
    });
});
</script>

和html很简单：

<a href="#" id="togglesearch">Slide Toggle</a>

<div class="toggle-search" style="display:none;">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div><!-- end toggle content -->

.toggle-search是正在切换的div，但是如果我单击该div（在页面上的所有其他位置），则不希望其关闭。

谢谢。

Answer 1

给它和id ='toggle-search'并尝试下面的代码。

 $('body').click(function(evt){ if(evt.target.id == "toggle-search") { return; }else if(evt.target.id == "togglesearch") { // toggle here jQuery('.toggle-search').slideToggle('fast'); } else { jQuery('.toggle-search').slideUp('fast'); } });