Question

我有如下所示的结构

<ul class="lft_mnu" id="menu-main-menu">    
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-261 current_page_item menu-item-276" id="menu-item-276">
      <a href="http://apptivowp.apptivo.com/company-history/">COMPANY HISTORY</a>
      <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287" id="menu-item-287">
              <a href="http://apptivowp.apptivo.com/company-history/sample-1/">Sample 1</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-286" id="menu-item-286">
              <a href="http://apptivowp.apptivo.com/company-history/sample-2/">Sample 2</a></li>
      </ul>
  </li>
</ul>

我使用下面的javascript来显示带有classname子菜单的li子选项卡ul

 <script type="text/javascript">

        $('li.menu-item').mousehover(function () {
            $('ul.sub-menu').slideDown('medium');
        });
        $('li.menu-item').mouseleave(function(){
        $('ul.sub-menu').slideUp('medium');
            });


      </script>

我需要在<ul classname="sub-menu">上鼠标悬停时显示<li classname="menu-item">。

我该怎么做？...

Answer 1

您可以更改的一件事是没有像mousehover这样的事件您需要将其更改为鼠标悬停。你需要注意的另一件事是你的孩子LI也有类menuItem，所以当鼠标鼠标移过它们时你也会看到你可能不想要的滑动行为。请检查，然后您可能需要做一些更改。

Answer 2

试试这个：

<script type="text/javascript">
    $(function(){
        $('li.menu-item ul.sub-menu').hide();
        $('li.menu-item').hover(function () {
                $('ul.sub-menu', this).slideDown('medium');
            }, function(){
            $('ul.sub-menu', this).slideUp('medium');
        });
    });
</script>

Jquery向下滑动不适用于ul li结构

2 个答案: