jquery - 在 Joomla 中使用 jQuery 显示子菜单

Question

我尝试在使用 jQuery(在 Joomla!中)将鼠标悬停在菜单项上后显示子菜单

生成的 HTML 是:

<nav>
  <ul class="nav menu mainmenu">
    <li class="item-101"><a href="/sherpa_migrate/index.php" >Home</a></li>  
    <li class="item-102 current active deeper parent"><a href="/sherpa_migrate
    /index.php/therapie" >Therapie</a>
      <ul class="nav-child unstyled small">
        <li class="item-104"><a href="/sherpa_migrate/index.php/therapie
        /kosten-en-vergoedingen" >Kosten en vergoedingen</a></li>
      </ul></li>
    <li class="item-103"><a href="/sherpa_migrate/index.php/wie-ben-ik" >Wie  
    ben ik?</a></li></ul>
</nav>

我使用的 CSS:

nav ul ul {
padding-left: 5px;
margin-left: 0;
display: none;
}

我试过的jQuery:

$('nav li.parent').mouseenter(function() {
    $(this).children('ul').stop().slideDown('slow')
    }).mouseleave(function() {
    $(this).children('ul').stop().slideUp('slow')
});

但这不会显示子菜单。我曾尝试使用警报，只是为了查看 mouseenter 是否正常工作，这一切正常。

这是我创建的 JSFiddle:https://jsfiddle.net/ujjvLzq9/

Answer 1

您错过了 jquery 事件中导航类上的点。试试对我来说很好

$('.nav li.parent').mouseenter(function() {
    $(this).children('ul').stop().slideDown('slow')
    }).mouseleave(function() {
    $(this).children('ul').stop().slideUp('slow')
});

nav ul ul {
padding-left: 5px;
margin-left: 0;
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul class="nav menu mainmenu">
    <li class="item-101"><a href="/sherpa_migrate/index.php" >Home</a></li>  
    <li class="item-102 current active deeper parent"><a href="/sherpa_migrate
    /index.php/therapie" >Therapie</a>
      <ul class="nav-child unstyled small">
        <li class="item-104"><a href="/sherpa_migrate/index.php/therapie
        /kosten-en-vergoedingen" >Kosten en vergoedingen</a></li>
      </ul></li>
    <li class="item-103"><a href="/sherpa_migrate/index.php/wie-ben-ik" >Wie  
    ben ik?</a></li></ul>
</nav>