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

我假设每个菜单项的div下都有一个subMenu，例如

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

说明：

首先隐藏div内的所有subMenu。
所有菜单项上的mouseleave无条件地隐藏div内的所有subMenu，即使它们已被隐藏。
所有菜单项上的mouseenter隐藏了所有相同的div，除了它显示菜单项链接中的相同文本的菜单项和子菜单h2标题。（有肯定更好的方法来做到这一点，但你需要一些方法来关联菜单项和子菜单。如果你对id有任何发言权，你可能能够使用表示连接的命名约定。）

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

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

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

如果这样过多地填充文本，则可以添加填充代替边距。

Answer 2

我只能猜测你是在谈论让“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);
  })
})

Answer 3

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

jQuery像NBC.com一样下拉

3 个答案: