how to make the menu close if it is clicked out

i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again

<a href="javascript:;" onClick=开发者_如何学运维"toggle('one');">More<small>▼</small></a><div class="more list" id="one" style="display:none"><a href="#">test</a> <span style="color:#329">|</span> <a href="#">test1</a> <span style="color:#169">|</span> <a href="#">test4</a></div></div>

Script:

function toggle(one)
{
  var o=document.getElementById(one);   
  o.style.display=(o.style.display=='none')?'block':'none'; 
}

how to make it close while the mosuse clicks on any other place other than the menus

Try using the onblur event.

I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:

<a href="#" class="more_link">More<small>▼</small></a>

And use unobtrusive script combined with event bubbling to your advantage, like this:

$(function() {
  $(".more_link").click(function(e) {
    $(this).next(".more").toggle();
    e.stopPropagation();
  });​​
  $(".more").click(function(e) {
    e.stopPropagation();
  });
  $(document).click(function() {
    $(".more").hide();
  });​
});

You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.

It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.

I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).

Look at this solution instead: jQuery click event for document but ignore a div

Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).

i.e.

jQuery(document).ready(function(){

 jQuery("html").bind("click", function(evt){
      var $target = jQuery(evt.target);
      var shouldShowMenu = $target.hasClass("menu_toggle");
      shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
      if(!shouldShowMenu)jQuery(".more_list").hide();
 });

});

NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"