使用标志单击外部和内部元素以切换容器

Question

我正在尝试使用标记来实现切换菜单。我知道有更简单的方法，但在这个小提琴之外，这是我正在寻找的。

javascript新手，但我的逻辑似乎是正确的，为什么不跟进呢？

这是fiddle

感谢您的帮助。

$('html').click(function (e) {
	
	var flag = false;
	
	if (e.target.id == 'menutoggle' && flag === false) {
	    $('menucontainer').show();
	    flag = true;
	}
	
	else if (flag === true && e.target.id == 'menutoggle') {
            $('menucontainer').hide();
	    flag = false;
	}
	
	else {
            $('menucontainer').hide();
	    flag = false;
       }
});

#menucontainer {
    display:none;
}

<a href="#" id="menutoggle">Toggle Menu</a>
<ul id="menucontainer">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

Answer 1

使用$('menucontainer')更改$('#menucontainer')：

$(document).ready(function(){
    var flag = false;

    $('html').click(function (e) {
        if (e.target.id == 'menutoggle' && flag === false) {
            $('#menucontainer').show();
            flag = true;
        }

        else if (flag === true && e.target.id == 'menutoggle') {
            $('#menucontainer').hide();
            flag = false;
        }

        else {
            $('#menucontainer').hide();
            flag = false;
        }
    });
});

您的文档脚本也准备好了吗？最后从html.click事件中取出var flag = false;。请使用上面的代码让项目工作。