Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<div id="click">
  <span> CLICK ME</span>
  <ul id="dropdown" class="hide">
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
  </ul>
</div>
 
#click{
  position:relative;
  width: 100px;
  height:100px;
  border:1px solid black;
  background: #bbb;
  
  display: flex;
  align-items: center;
  justify-content:center;
}
​
#dropdown{
  position:absolute;
  top:100%;
  
  width:100%;
  border: 1px solid black;
  padding:10px;
  list-style:none;
}
​
.hide{
  display: none !important;
}
​
​
span{
  color: #fff;
}
 
document.querySelector('#click').addEventListener('click',function(e){
e.stopPropagation();
showHide();
},false);
​
document.addEventListener('click', function(event){showHide();
                                                  alert('клик вне');},false);
    
function showHide(){
  var drop = document.querySelector('#dropdown');
    if(drop.classList.contains('hide')){
        drop.classList.remove('hide');
    }
    else{
        drop.classList.add('hide');
    }
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers