Javascript 通过单击切换元素_Javascript_Html

Javascript 通过单击切换元素

javascript html

Javascript 通过单击切换元素,javascript,html,Javascript,Html,您可以看到我的脚本示例。当你点击“点击我”，下面会出现“某物”。。。但我希望当我点击其他地方时，“某物”不再存在。我需要一个新的JS，我不擅长javascript，我只是要学习它。我希望你能理解我 PS：对不起我的英语 <!DOCTYPE html> <html> <head> <title>Titel</title> <meta charset="ISO-8859-1"> <meta name="descr

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


滴度
函数登录（）{
document.getElementById（'log2'）.style.display='inline-block'；
}
einlogen
有些事情

添加以下脚本-

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"
}

这应该适合您：

html

我重新安排了您的代码，使其更具可重用性和可读性。（编辑：单击“登录”可切换$login内容。）

请检查您的无效HTML结构。在最初的JSFIDLE中，您有一个结束的

，没有一个开始的。此外，您只能将

元素放在

或

列表标记中。

试试这个：我已经用我的解决方案发布了一个答案（带有一点重新格式化的代码）。正如注释所示：

应始终与和在一起，没有就不能有内容。所以你的HTML是无效的。嘿，你能改变你的脚本吗？当我第二次点击EinLogGen时，log2也是无效的closed@DOCTYPEHTML只需创建一个计数器变量（var counter=0）来计算点击次数。如果大于等于1，则应关闭“log2”。@DOCTYPEHTML您应该真正了解HTML、JS等。！实际上，它不是一个代码请求平台，但我为您做了这件事——可能是因为您也来自德国：-）
<div>
    <li id="log">Einloggen</li>
</div>
<ul id="log2" style="display: none;">somthing</ul>

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';
    }
}

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";
}

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;
});