onblur 및 setTimeout을 사용하여 하위 메뉴 닫기

Question

onblur를 사용하여 하위 메뉴를 닫으 려합니다. 하위 메뉴를 "숨기"위해 그것을 가지고 있지만, 그냥 그렇게합니다. 메뉴를 원래 상태로 되돌리려합니다. 나는 또한 메뉴에 타임 아웃을 설정하여 5-10 초 후에 닫을 것입니다.

피씨 나는 이것을 위해 jsfiddle를 만들려고 노력했지만 기능이 없었다. 또한 모바일 사이트 용입니다.

HTML

<div class="smenu_div""> 
    <ul> 
     <li> 
     <a class="menu-title" href="#" onblur="hidemenu()" onclick="showsub()">Menu</a> 
     <ul id='hiddenMenu'> 
      <li><a href="/mobile/m.index.html">Home</a></li> 
      <li><a href="m.trucks.html">Trucks</a></li> 
      <li><a href="m.equipment.hmtl">Equipment</a></li> 
     </ul> 
     </li> 
    </ul> 
</div> 

CSS

.smenu_div ul 
{ 

    padding:0px; 
    margin-top:5px; 
    margin-right:40px; 
    font-family:georgia; 
    font-size:70px; 
    color:#ffffff; 
    list-style:none; 
    text-indent:15px; 
    text-align:center; 
    width:40%; 
    overflow:hidden; 
    position: relative; 
    display: block; 
    float:right; 
} 

.smenu_div ul li 
{ 

    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(0,0,0,0); 
    line-height:justified; 
    margin-top: 10px; 
    position:relative; 
} 


/* Changed this so that your hidden menu is hidden by default */ 
.smenu_div li ul 
{ 

    z-index: 50; 
    display: none; 
    position: relative; 
    width: 100%; 
    background: transparent; 
    float:none; 
    } 

.smenu_div ul li a 
{ 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    text-decoration:none; 
    color:#ffffff; 
    background: #000000; 
    display:block; 
    position:relative; 
} 

/* @new */ 
.smenu_div ul li a.menu-title 
{ 
    padding-right: 50px; 
    background: #000000 url('plus.png') no-repeat right center; 
    background-size: 75px 75px; 

} 


.menu-open .smenu_div ul li a.menu-title 
{ 

    background-image: url('minus.png') 
} 

자바 스크립트

var hidden = true; 

    function showsub() { 

     document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none'; 
     document.body.classList.toggle('menu-open'); 
     hidden = !hidden; 


    }; 

    function hidemenu() { 
     document.getElementById('hiddenMenu').style.display = 'none'; 
     document.body.classList.toggle('plus'); 
     hidden = !hidden; 
    }; 

Answer 1

이 jsfiddle을 나누기 때문에 <div class ="smenu_div"">이, 너무 많은 따옴표를 가지고 HTML 코드에서 실수가있다.

당신은 거의 그대로 당신이 코드에서 놓치고있는 모든 showsub에서

setTimeout(hidemenu,10000); 

, 그것은이있다. 사용자가 10 초 후에 닫히지 않게하려면, 사용자가 물건을 계속 누르고 있으면 추가 코드가 필요하지만 사용자가 메뉴를 클릭 한 후 10 초 후에도 괜찮은지 확인하십시오. 승인.

here's the fiddle