使用 onblur 和 setTimeout 关闭子菜单

Question

我想使用 onblur 关闭子菜单。我有它来“隐藏”子菜单，但它就是这样做的。我希望菜单恢复到原来的状态。我还想在菜单上设置一个超时，这样它会在 5-10 秒后关闭。

P.S 我试图为此制作一个 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')
}

JavaScript

 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

你的 html 代码有一个错误<div class ="smenu_div""> 有一个太多的引号，所以它破坏了 jsfiddle。

你几乎拥有它，实际上你在代码中缺少的只是

 setTimeout(hidemenu,10000);

来自showsub。请注意，如果您想阻止它在 10 秒后关闭，如果用户一直按下东西，您将需要一些额外的代码，但如果您可以在用户点击菜单后关闭 10 秒，那么不管它是什么好的。

here's the fiddle