Question

我正在网站上工作，我想在点击时隐藏Div（RED COLOR DIV）。

当用户点击字词＆＃34; HIDE＆＃34; （内导航栏）.. javascript函数将隐藏所有菜单链接（不是徽标）并显示RED DIV

现在当RED DIV可见并且只有LOGO链接可见时，所以当用户点击RED DIV以外的任何地方时，它应该切换javascript功能并使RED DIV隐藏并且所有菜单链接再次可见

< / LI> 到目前为止，我已经做到了这一点。我只需要javascript代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

假设您在隐藏按钮id="hide"标记上有li：

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

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

mousedown事件的sample名称是为了确保只有此事件才会被取消绑定

＆＃13;

$(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');
            }
        });
    });

});

＆＃13;

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

＆＃13;

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

＆＃13;

Div和菜单链接显示隐藏在div之外的onclick

2 个答案: