Question

您可以看到我的脚本示例。当您点击＆＃34;点击我＆＃34;，将出现在＆＃34;＆＃34;＆＃34; ... 但是当我点击其他地方时，我想要这样的东西＆＃34;＆＃34;不再存在我需要一个新的JS，我不擅长javascript，我只是去学习它。我希望你能理解我。

PS：抱歉我的英文

<!DOCTYPE html>
<html>

<head>
<title>Titel</title>

<meta charset="ISO-8859-1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<script type="text/javascript">
    function login() {

    document.getElementById('log2').style.display='inline-block';

    }
</script>
</head>
<body>
    <li id="log" onclick="login()">Einloggen</li>
    </div>
    <ul id="log2" style="display: none;">somthing
    </ul>
</body>
</html>

FIDDLE

Answer 1

添加以下脚本 -

document.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;

    if(target.id=="log")return;

    document.getElementById("log2").style.display = "none"
}

Answer 2

这应该适合你：

<强> Demo here

HTML

<div>
    <li id="log">Einloggen</li>
</div>
<ul id="log2" style="display: none;">somthing</ul>

的javascript

function login() {
    document.getElementById('log2').style.display = 'inline-block';
}
window.onclick = function (e) {
    console.log(e.target);
    if (e.target == document.getElementById('log')) {

        document.getElementById('log2').style.display = 'inline-block';

    } else {
        console.log('window');
        document.getElementById('log2').style.display = 'none';
    }
}

Answer 3

我重新安排了您的代码，使其更具可重用性和可读性。（编辑：点击'登录'切换$ loginContent。）

var $loginLink = document.getElementById("log");
var $loginContent = document.getElementById("log2");

function showLoginBox(show) {
    if (show) {
        $loginContent.style.display = "block";
    } else {
        $loginContent.style.display = "none";
    }
}

$loginLink.addEventListener("click", function (evt) {
    showLoginBox(!opened);
    opened = !opened;
    evt.stopPropagation();
});

var opened = false;

window.addEventListener("click", function (evt) {
    if (evt.target == $loginContent) {
        return;
    }
    showLoginBox(false);
    opened = false;
});

http://jsfiddle.net/XAFZb/23/

还请检查无效的HTML结构。在原来的jsFiddle中，你有一个没有开头的</div>。此外，您只能在<li>或<ul>列表标记中放置<ol>个元素。

Answer 4

document.getElementById("log").onclick = login
function login(e) {
   document.getElementById('log2').style.display='inline-block';
   e.stopPropagation()
}

document.body.onclick = function(){
    document.getElementById("log2").style.display = "none";
}

http://jsfiddle.net/XAFZb/20/

单击切换元素

4 个答案: