jQuery像NBC.com一样下降

Question

我一直在努力使像NBC.com这样的下拉菜单没有成功 - 因为我被限制使用下面的HTML。 我希望它是鼠标悬停 - 有点像UI手风琴... 任何帮助将不胜感激！ :)

<div class="mainMenu" align="center"> 
    <table cellpadding="0" cellspacing="0" border="0" width="950"> 
     <tr> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/new/#new" class="mainMenuLink" id="1">I'm New</a></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/ministries/#ministries" class="mainMenuLink">Ministries</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/beliefs/#beliefs" class="mainMenuLink">Beliefs+Mission</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/listen/#listen" class="mainMenuLink">Listen</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/connect/#contact" class="mainMenuLink">Connect</a></div></td> 
      <td width="100%"></td> 
     </tr> 
    </table> 
</div> 
    <div class="subMenu"> 
     <div id="new"> 
      <h2>I'm New</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
</div> 

Answer 1

这不是完美的，但应该给你一个想法：

jQuery("div.subMenu div").hide(); 
jQuery("div.mainMenu div.menuItem").mouseleave(function() { 
     jQuery("div.subMenu div").hide(); 
    }).mouseenter(function() { 
     var linkText = jQuery("a", this).text(); 
     jQuery("div.subMenu div").each(function (n) { 
     var hdrText = jQuery("h2", this).text(); 
     if (linkText == hdrText) { 
      jQuery(this).show(); 
     } else { 
      jQuery(this).hide(); 
     } 
     }); 
    }); 
// update: keep the submenu open 
jQuery("div.subMenu div").mouseleave(function() { 
    jQuery(this).hide(); 
}).mouseenter(function() { 
    jQuery(this).show(); 
}); 

我假设有下subMenu每个菜单项，例如div。

<div class="subMenu"> 
    <div id="new"> 
     <h2>I'm New</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
    </div> 
    <div> 
     <h2>Ministries</h2> 
     <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div> 
     <h2>Beleifs+Mission</h2> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> 
    </div> 
    <div> 
     <h2>Listen</h2> 
     <p>laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div> 
     <h2>Connect</h2> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit</p> 
    </div> 
</div> 

说明：

1. 被藏在里面subMenu所有div的开始。
2. mouseleave所有菜单项无条件隐藏所有div的subMenu，即使它们已被隐藏。
3. 的mouseenter上所有的菜单项隐藏所有那些同样div的，但它表明，具有菜单项的链接和子菜单的h2水箱内相同的文本之一。 （有肯定更好的方法来做到这一点，但你需要一些方法来关联菜单项和子菜单。如果你有任何关于id的说法，你可能能够使用表示连接的命名约定）

更新：请注意，有很多无条件的hide()正在进行。例如，当鼠标离开菜单项时，子菜单将消失。要使鼠标在其上时可见子菜单，请为"div.subMenu div"添加mouseleave和mouseenter处理程序。为避免闪烁，您可能需要跟踪每个子菜单的状态。

更新2：我添加了几行以保持子菜单打开，而鼠标在其中。 YMMV闪烁。这对我而言没有任何改变对我有用（它只是忽略它们）。但是，子菜单div需要定位在菜单项上，以便鼠标可以从菜单项移动到子菜单而不会消失。在我的测试代码，我设置以下，以确保它的工作：

div.mainMenu div.menuItem, 
div.subMenu div, 
div.subMenu div h2 { 
    margin-top: 0; 
    margin-bottom: 0; 
} 

如果太多聚成一团的文字，可以代替保证金添加填充。

Answer 2

你可能有一堆div开始隐藏，然后onMouseOver显示正确的，并隐藏其他人。

Answer 3

我只能猜测你在谈论让“subMenu”具有手风琴风格？

如果是这样的话，那么就请确保您已jQuery UI的加载并添加此行：

$(document).ready(function(){ 
$('.submenu').accordion({ event: 'mouseover', header: 'h2' }); 
}) 

如果你想在MAINMENU出现在手风琴的风格，这将是更困难你将不得不完全隐藏表格并从中提取数据，并将其转换为更合适的结构，例如subMenu。

请澄清你正在尝试做什么。

---

好吧，我搞砸了你有什么...我没有触及当前结构，但我确实添加了东西。基本的脚本如下，但我张贴在this pastebin一个完整的工作版本 - 我尝试添加了一堆的意见，以帮助您通过浏览乱七八糟的：P

$(document).ready(function(){ 
/* hide submenu items */ 
$('.subMenu').hide(); 

/* disable links in menu */ 
$('.mainMenuLink').click(function(){return false;}) 

/* Top row is the menu row */ 
$('.mainMenu table tr:first').addClass('mainMenuRow'); 

/* Add display area */ 
var numberOfColumns = $('.mainMenuRow td').length; 
$('.mainMenu table').append('<tr><td class="subMenuDisplay" colspan="' + numberOfColumns + '"></td></tr>') /* */ 

/* Add accordian style functioning */ 
var slideDelay = 500; 
$('.mainMenu td').hover(
    function(){ 
    /* only continue if there is a link inside the cell */ 
    if ($(this).find('.mainMenuLink').length) { 
    var subMenuId = $(this).find('.mainMenuLink').attr('hash'); /* hash returns the hash portion of the URL */ 
    } else { 
    return; 
    } 
    /* hide Content */ 
    $('.menuContent').remove(); 

    /* menu is active, display contents of submenu div */ 
    $(this).addClass('menuActive'); 
    $('.subMenuDisplay').html('<div class="menuContent" style="display:none"></div>'); 
    $('.menuContent').html($(subMenuId).html()).slideDown(slideDelay); 
    },function(){ 
    /* close display */ 
    $(this).removeClass('menuActive'); 
    $('.menuContent').slideUp(slideDelay); 
    }) 
})