Help with toggle

JavaScript
1

hello

I have this script which is a drop down menu. When the button is clicked it toggles the menu to be displayed. When the button is clicked again it toggles the menu to be hidden.

$(function() {

    var button = $('.button');
    var menu = $('.menu');

    
    $('ul li a', menu).each(function() {
        $(this).append('<span />');
    });
    
    button.toggle(function(e) {
        e.preventDefault();
        menu.css({display: 'block'});
        $('.ar', this).html('&#9650;').css({top: '3px'});
        $(this).addClass('active');
    },function() {
        menu.css({display: 'none'});
        $('.ar', this).html('&#9660;').css({top: '5px'});
        $(this).removeClass('active');
        
    });
    
    

        
        
});

How can I make it so when the toggle menu is active, and I click on the menu or on the outside it is hidden again.
At the moment it will only hide itself if the button is clicked on again.

Regards

2

Perhaps try something like

$(“.button”).blur(function() {
$(“.menu”).hide();
});