div 和菜单链接 show-hide onclick 在 div 之外

Question

我正在网站上工作，我想在点击时显示隐藏 Div (RED COLOR DIV)。

1. 当用户点击单词“HIDE”（导航栏内）时.. javascript 函数将隐藏所有菜单链接（不是徽标）并显示 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>

Answer 2

假设您在隐藏按钮的li 标签上有一个id="hide"：

<li id="hide"><a href="#home" class="anivisib">HIDE</a></li>

您可以使用此 jquery 解决方案来实现您想要的行为：

mousedown 事件的sample 名称是为了确保只有这个事件会被解除绑定

$(document).ready(function(){

    // The function to toggle visibility of elements
    var aniToggle = function(){
        $('li').not(':first-child').toggle();
        $('div#hideshow').toggle();
    }

    // Clicking on hide li runs aniToggle function and set an event for document click
    $('li#hide').click(function(){
        aniToggle();

        $(document).on('mousedown.sample', function(e){
            if( 
                // If the click target is not #hideshow div
                !$(e.target).is('div#hideshow') && 

                // And also not its child elements
                $(e.target).parents('div#hideshow').length == 0
            ){

                // Run aniToggle function
                aniToggle();

                // Unbind the click element from document so it doesn't fire on each click
                $(document).off('mousedown.sample');
            }
        });
    });

});

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;


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<ul>
  <li><a href="#news">LOGO</a></li>

  <li id="hide"><a href="#home" class="anivisib">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>