0

我一直在努力弄清楚如何让我的下拉菜单使用 jQuery 进行动画处理。我正在使用 wp_nav_menu 和一个简单的脚本，但我不确定它为什么不起作用。

这是导航源：

<nav id="topNav">
  <div id="navwrap" class="menu-main-container">
    <ul id="menu-main" class="dropdown">
      <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://www.mysite.com/page1-2/">Page1</a>
        <ul class="sub-menu">
          <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://www.mysite.com/sub-page1-1/">Sub-Page1-1</a></li>
          <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://www.mysite.com/sub-page1-2/">Sub-Page1-2</a></li>
        </ul>
      </li>
      <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://www.mysite.com/page2-2/">Page2</a>
        <ul class="sub-menu">
          <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://www.mysite.com/sub-page2-1/">Sub-Page2-1</a></li>
          <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://www.mysite.com/sub-page2-2/">Sub-Page2-2</a></li>
        </ul>
      </li>
      <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.mysite.com/page3-2/">Page3</a>
        <ul class="sub-menu">
          <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://www.mysite.com/sub-page3-1/">Sub-Page3-1</a></li>
          <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://www.mysite.com/sup-page3-2/">Sup-Page3-2</a></li>
        </ul>
      </li>
      <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://www.mysite.com/page4-2/">Page4</a>
        <ul class="sub-menu">
          <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="http://www.mysite.com/sub-page4-1/">Sub-Page4-1</a></li>
          <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://www.mysite.com/sub-page4-2/">Sub-Page4-2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

这是我编写的用于使隐藏的 UL 上下动画的脚本：

<script type="text/javascript">
jQuery(function() {
    jQuery("#navwrap ul.dropdown li").hover(function() {
        jQuery(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 200 );
    }, function(){
        jQuery(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200 );
    });

});
</script>

关于为什么这不起作用的任何建议？我已经在这几个小时了。

4

2 回答 2

1

我必须在页面加载时隐藏和显示子菜单才能让我的下拉菜单正常工作。

$(".sub-menu").hide(); // hide the submenu on page load
$(".current_page_item .sub-menu").show();
于 2012-09-14T21:57:26.970 回答
0

我用你的代码做了一个jsfiddle 例子，它工作正常。*注意：我没有添加任何 CSS。

因此，请检查您的代码中的以下问题：

  1. jQuery 是否正确链接。
  2. 检查萤火虫或铬检查元素是否有任何错误。
  3. 检查您的 CSS 是否有任何覆盖脚本的规则。

仍然有问题，请提供站点链接。

干杯！！！

于 2012-05-18T03:34:29.810 回答