隐藏悬停在点击离开触摸屏平板电脑/移动设备

我有以下菜单，在桌面上完美的作品。悬停在项目上时，出现二级菜单。隐藏悬停在点击离开触摸屏平板电脑/移动设备

在平板电脑/移动设备，这是一个点击/触摸

我想要的菜单悬停效果（对平板电脑的触摸）的平板电脑/移动设备上点击离开时消失。

例如ipad，当点击我的清单，二级菜单显示，但需要它消失时，点击离开菜单

这可能吗？

CSS：

* {outline:none; border:none; margin:0; padding:0; font:14px arial,sans-serif;} 
body {background: url(images/bg.gif) repeat;} 
#top {background: url(images/top_tile.png) repeat-x; height:140px; width:100%;} 
.wrap {width:980px; margin:0 auto;} 
#top1 {height:60px;} 
.logo {padding-top:10px;} 
#menu {height:48px;} 
/*NAV*/ 
#nav{ 
    list-style:none; 
    font-weight:bold; 
    /* Clear floats */ 
    float:left; 
    width:100%; 
} 
#nav li{ 
    float:left; 
    margin-right:10px; 
    position:relative; 
} 
#nav a{ 
    display:block; 
    padding:20px 25px 7px 15px; 
    color:#333; 
    height:25px; 
    text-decoration:none; 
} 
#nav a:hover{ 
    color:#fff; 
    background:#ff9900; 
    text-decoration:none; 
} 

/*--- DROPDOWN ---*/ 
#nav ul{ 
    background:#fff; 
    list-style:none; 
    position:absolute; 
    left:-9999px; 
    min-width:200px; 
    border-radius:0px 0px 3px 3px; 
    border:1px solid #ccc; 
} 
#nav ul li{ 
    padding-top:1px; 
    float:none; 
    background:#fff; 
    } 
#nav ul a{ 
    white-space:nowrap; 
    font-size:13px; 
    color:#666; 
    padding: 10px 0px 5px 15px; 
} 
#nav li:hover ul{ 
    left:0; 

} 
#nav li:hover a{ 
    background:#ff9900; 
    text-decoration:none; 
} 
#nav li:hover ul a{ 
    text-decoration:none; 
    background:#fff; 

} 
#nav li:hover ul li a:hover{ 
    background:#ff9900; 
    color:#fff; 
}

HTML：

<body> 
    <div id="top"> 
     <div id="top1" class="wrap"><img src="images/logo.gif" class="logo" /></div> 
      <div id="menu" class="wrap"> 
       <ul id="nav"> 
        <li><a href="#">My Lists</a> 
         <ul> 
          <li><a href="#">List 1</a></li> 
          <li><a href="#">List 2</a></li> 
          <li><a href="#">List 3</a></li> 
          <li><a href="#">View all Lists</a></li> 
         </ul> 
        </li> 
        <li><a href="/pages/following">Following</a> 
         <ul> 
          <li><a href="#">Follow 1</a></li> 
          <li><a href="#">Follow 2</a></li> 
          <li><a href="#">Follow 3</a></li> 
          <li><a href="#">View all Follows</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</body>

Fiddle

来源

2012-12-11 Darren Sweeney

$(document).click(function() { 
alert("me"); 
}); 

$(".myDiv").click(function(e) { 
e.stopPropagation(); // This is the preferred method. 
return false;  // This should not be used unless you do not want 
        // any click events registering inside the div 
});

---如此地。 jQuery hide element when clicked anywhere on the page

来源

2012-12-12 02:29:45

隐藏悬停在点击离开触摸屏平板电脑/移动设备

回答

相关问题