javascript - div 和菜单链接在 div 外部显示-隐藏 onclick

Question

我正在开发一个网站，我想在点击时显示隐藏 Div(红色 DIV)。

1. 当用户点击单词“HIDE”(导航栏内)时..javascript函数将隐藏所有菜单链接(不是 Logo )并显示RED DIV

2. 现在，当 RED DIV 可见且仅 LOGO 链接可见时，因此当用户单击 RED DIV 之外的任何位置时，应切换 javascript 函数并使 RED DIV 隐藏且所有菜单链接再次可见

到目前为止我已经做到了这一点。我只需要 JavaScript 代码

function aniToggle() {

    document.getElementById("hideshow").style.display = "block";

    var x = document.getElementsByClassName("anivisib");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].classList.toggle("toggle-anivisib");
    }
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

#hideshow {

height: 500px;
z-index:2;
position: absolute;
left: 30%;
top: 0;
background-color: red; 
display: none;
}

.toggle-anivisib {
	visibility: hidden;


}

<header>
<ul>
  <li><a href="#news">LOGO</a></li>

  <li><a class="active anivisib" href="#home" onclick="aniToggle()">HIDE</a></li>
  <li><a href="#news" class="anivisib">News</a></li>
  <li><a href="#contact" class="anivisib">Contact</a></li>
  <li><a href="#about" class="anivisib">About</a></li>
</ul>
<div id="hideshow" >
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
</div>
</header>

<main>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
</main>

Answer 1

在您的onclick="aniToggle()"中，我传递了一个事件来停止Event Propagation此事件不会传播到 document.onclick ，添加 document.onclick 它将检测文档上的点击事件。

function aniToggle(ev) {
        ev.stopPropagation();
        document.getElementById("hideshow").style.display = "block";
        toggleElements('anivisib');
    }

    window.onload = function(){
        var divToHide = document.getElementById('hideshow');
        document.onclick = function(e){
            if(e.target.id !== 'hideshow' && !divToHide.contains(e.target)){
                //element clicked wasn't the div; hide the div
                if (divToHide.style.display == 'block') {
                    divToHide.style.display = 'none';
                    toggleElements('anivisib');
                }
            }
        };
    };

    function toggleElements(cls) {
        var x = document.getElementsByClassName(cls);
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].classList.toggle("toggle-anivisib");
        }
    }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

#hideshow {

height: 500px;
z-index:2;
position: absolute;
left: 30%;
top: 0;
background-color: red; 
display: none;
}

.toggle-anivisib {
	visibility: hidden;


}

<header>
<ul>
  <li><a href="#news">LOGO</a></li>

  <li><a class="active anivisib" href="#home" onclick="aniToggle(event)">HIDE</a></li>
  <li><a href="#news" class="anivisib">News</a></li>
  <li><a href="#contact" class="anivisib">Contact</a></li>
  <li><a href="#about" class="anivisib">About</a></li>
</ul>
<div id="hideshow" >
<div>
<div>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
</div>
</div>
</div>
</header>

<main>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
<p>hi hih ih ih ih ih i hi hi h ih ih ih i hi </p>
</main>