Lista aberta do botão jQuery, lista fechada quando clicada fora - jquery, botão, menu

Eu sei que há uma dúzia de perguntas sobre isso no SO, mas nenhuma delas parece funcionar para mim. O que estou tentando é o seguinte código:

jQuery(".mybutton").click(function(){

jQuery(".list").show().bind("click", function(event){
event.stopPropagation();
});

jQuery("html").bind("click", function() {
jQuery(".list").hide();
});
});

O item da lista nunca é aberto. O clique de ligação html é sempre acionado.

Respostas:

Em vez de vincular o click ao html e .list, vincule-o globalmente e verifique se o destino atual é (filho de) um .list elemento.

jQuery(".mybutton").click(function(){
jQuery(window).click(function(event) {
var $elem = $(event.target)
if($elem.hasClass("list") || $elem.parents(".list").length == 0) return;
jQuery(".list").hide();
});
});

Você realmente não deve vincular eventos com um clique assim. Tente algo assim.

jQuery(".mybutton").click(function(e){
jQuery(".list").show();
e.stopPropagation();
});

jQuery("body").click(function() {
jQuery(".list").hide();
});

jQuery(".list").click(function(e){
e.stopPropagation();
});

Acho que o principal problema é que você também precisa de uma chamada stopPropagation no manipulador de cliques mybutton.