-1

您可以查看我的脚本示例。当您单击“单击我”时，会出现在“某物”下方...但是我希望当我单击其他地方时“某物”不再存在。我需要一个新的 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>

小提琴

4

4 回答 4

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"
}
于 2013-07-29T20:03:17.037 回答
0 
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/

于 2013-07-29T20:05:21.263 回答
0

我重新安排了您的代码，使其更易于重用和可读。（编辑：单击“登录”会切换 $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>列出标签。

于 2013-07-29T20:05:52.847 回答
0

这应该适合你：

演示在这里

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';
    }
}
于 2013-07-29T20:04:44.223 回答