Javascript 使用onblur和setTimeout关闭子菜单

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

另外，我试图为此制作一个JSFIDLE，但它无法正常工作。此外，这是一个移动网站

HTML

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;
    };

---

你的html代码中有一个错误。明白了。现在我更新了小提琴，这样你就可以看到我想要的正负图像了。通过在菜单外单击来播放onBlur。你可以看到负数在回到正数时保持负数。有没有办法重新加载菜单，而不是隐藏它。好的，我知道了。click事件正常工作，但使用setTimeout无法删除打开的菜单。我稍微修改了代码，使“菜单打开”的切换尊重您正在尝试执行的操作。i、 对hidemenu的调用总是会删除打开的菜单，但showmenu会根据隐藏的菜单进行切换！正是我需要的。谢谢。在笔记本电脑上很好用。当我在手机上试用时，onBlur不起作用。触摸屏有解决办法吗？您可以尝试连接到onChange。onBlur适用于大多数手机，但确实存在问题。

.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;
    };

 setTimeout(hidemenu,10000);