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

使用onblur和setTimeout关闭子菜单

1 个答案: