Jquery 向下滑動不適用於 ul li 結構

Question

我有 ul li 結構，如下所示

<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 來顯示帶有類名子菜單的 li 子選項卡

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

當我將鼠標懸停在<li classname="menu-item">上時，我需要顯示<ul classname="sub-menu"> > 。

我怎樣才能做到這一點？...

Answer 1

您可以更改的一件事是沒有像 mousehover 這樣的事件需要將其更改為 mouseover。 您需要注意的另一件事是您的孩子 LI 也有 class 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>