Hide menu by clicking out and exit js

Asked

Viewed 289 times

0

How to hide ul by clicking off the menu or hovering off the menu? I tried but failed. 

function aperfil(opthard){
	if(document.getElementById(opthard).style.display== "none"){
		document.getElementById(opthard).style.display = "block";}
		else {document.getElementById(opthard).style.display = "none"}
		
		
		} 
<ul class="menup">

             <li><a href="#"><img src="img/icones/perfil.png" width="27" height="22"  alt="" onClick="aperfil('perfil');"/></a>
                <ul id="perfil" style="display: none; border:1px solid #5589c4; background-color:#fff;">
                      <li><a href="/painel/alt_pass.php">Alterar Senha</a></li>
                      <li><a href="/painel/suporte.php">Suporte</a></li> 
                      <li><a href="?go=sair">Sair</a></li> 
                        </ul>
            </li>
            </ul>

javascript html

  • try using the jquery function onmouseout representing that you removed the mouse on top of the menu.

  • @Marconi did the following I add <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> and increased the script $(Document). ready(Function() { $("#profile").mouseout(Function() { Document.getElementById('profile').style.display = 'None'; }); }); correct?

  • 1

    Change mouseout for onmouseout. Hover mouse image . http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover

  • for me became more suitable <script>Function aperfil(opthard){ if(Document.getElementById(opthard).style.display== "None"){ Document.getElementById(opthard).style.display = "block";} } <! -- hide the menu if you hover the mouse outside requires jquery.min-> $(Document). ready(Function() { $("#profile").mouseover(Function() { Document.getElementById('profile').style.display = 'block'; }); $("#profile").mouseout(Function() { Document.getElementById('profile').style.display = 'None'; }); }); </script>

  • Did you get it? I’m going to post an answer, just so it doesn’t get vague.

1 answer

1


Here in the W3schools has a good example.

Note that when you hover the mouse over the image the function is called bigImgand when removed calls the function normalImg. 

function bigImg(x) {
    x.style.height = "64px";
    x.style.width = "64px";
}

function normalImg(x) {
    x.style.height = "32px";
    x.style.width = "32px";
}
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="Smiley" width="32" height="32">

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.