jQuery SubMenu的机会

问题描述

我一直在这一整晚都无济于事。典型的SubMenu问题，我读过很多类似的问题，但无法找到解决方法。

我有一个菜单，它是一个无序列表。我也有一个相同的子菜单。我有菜单定位好等问题是，当我的子菜单出现在我的常规菜单的一侧，就像我从菜单1悬停到菜单2时，它消失。我确定它的东西很简单，但可以看看吗？

 < script> 
 $（document）.ready（function（）{
 $（'。nav'）。hover（function（e）{
 if（！$（'。nav2'）。is （'：visible'））
 {
 $（'。nav2'）。fadeIn（'slow'）; 
} 
}，function（）{
 if（！$（'。nav2'）。is（'：hover'））
 {
 $（'。nav2'）。fadeOut（'slow'）; 
} $ b （'。'）; 
 $ b $（'。nav2'）。mouseout（function（）{
 if（！$（'。nav'）。is（'：hover'）） 
 {
 $（'。nav2'）。fadeOut（'slow'）; 
} 
}）; 
}）; 
< / script> 
  

我的名单是：

 < div id =col1> 
 
< ul class =nav> 
< li>< a href =http://www.alan.com>主页< / a>< / li> 
< li>< a href =http://www.alan.com>关于< / a>< / li> 
< li>< a href =http://www.alan.com>新列表< / a>< / li> 
< li>< a href =http://www.alan.com>精选主页< / a>< / li> 
< li>< a href =http://www.alan.com>城镇事实< / a>< / li> 
< li>< a href =http://www.alan.com>与我联系< / a>< / li> 
< / ul> 
 
< ul class =nav2> 
< li>< a href =http://www.alan.com>生物< / a>< / li> 
< li>< a href =http://www.alan.com>凭证< / a>< / li> 
< li>< a href =http://www.alan.com>教育< / a>< / li> 
< / ul> 
 
< / div> 
  

解决方案

将子菜单嵌入 li 在主菜单上。例如：

 < div id =col1> 
< ul class =nav> 
< li>< a href =http://www.alan.com>主页< / a>< / li> 
< li>< a href =http://www.alan.com>关于< / a> 
< ul class =nav2> 
< li>< a href =http://www.alan.com>生物< / a>< / li> 
< li>< a href =http://www.alan.com>凭证< / a>< / li> 
< li>< a href =http://www.alan.com>教育< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =http://www.alan.com>新列表< / a>< / li> 
< li>< a href =http://www.alan.com>精选主页< / a>< / li> 
< li>< a href =http://www.alan.com>城镇事实< / a>< / li> 
< li>< a href =http://www.alan.com>与我联系< / a>< / li> 
< / ul> 
< / div> 
  

编辑：
这应该给你一些想法。 -

Ive been workin on this all night to no avail. Typical SubMenu question and Ive read a lot of similar ones on here but cant find a fix.

I have a menu which is a unordered list. I also have a submenu that is the same. I have the menus positioned fine etc. Problem is that when my submenu appears to the side of my regular menu, as SOON as I go from hovering from menu 1 to menu 2, it disappears. Im sure its something simple but could somone take a look?

<script>
$(document).ready(function() {
$('.nav').hover(function(e) {
    if(!$('.nav2').is(':visible'))
    {
        $('.nav2').fadeIn('slow');
    }
},function(){
    if(!$('.nav2').is(':hover'))
    {
        $('.nav2').fadeOut('slow');
    }
});

$('.nav2').mouseout(function(){
    if(!$('.nav').is(':hover'))
    {
        $('.nav2').fadeOut('slow');
    }
});
});
</script>

And my lists are:

<div id="col1">

<ul class="nav">
<li><a href="http://www.alan.com">Home</a></li>
<li><a href="http://www.alan.com">About</a></li>
<li><a href="http://www.alan.com">New Listings</a></li>
<li><a href="http://www.alan.com">Featured Home</a></li>
<li><a href="http://www.alan.com">Town Facts</a></li>
<li><a href="http://www.alan.com">Contact Me</a></li>
</ul>

<ul class="nav2">
  <li><a href="http://www.alan.com">Bio</a></li>
  <li><a href="http://www.alan.com">Credentials</a></li>
  <li><a href="http://www.alan.com">Education</a></li>
  </ul>

</div>

解决方案

Nest the submenu into the li on the main menu. Something like:

<div id="col1">
    <ul class="nav">
        <li><a href="http://www.alan.com">Home</a></li>
        <li><a href="http://www.alan.com">About</a>
            <ul class="nav2">
                <li><a href="http://www.alan.com">Bio</a></li>
                <li><a href="http://www.alan.com">Credentials</a></li>
                <li><a href="http://www.alan.com">Education</a></li>
            </ul>
        </li>
        <li><a href="http://www.alan.com">New Listings</a></li>
        <li><a href="http://www.alan.com">Featured Home</a></li>
        <li><a href="http://www.alan.com">Town Facts</a></li>
        <li><a href="http://www.alan.com">Contact Me</a></li>
    </ul>
</div>

EDIT:This should give you some ideas. - jsFiddle Demo

这篇关于jQuery SubMenu的机会的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！