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类的点。试试我的工作正常

$('.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>

Answer 2

因此，在尝试不同的解决方案后，我使用了Firebug控制台。原来，有一个JavaScript / Mootools / jQuery冲突。我将jQuery脚本更改为：

jQuery( document ).ready(function() {

jQuery('.nav li.parent').mouseenter(function() {    
    jQuery(this).children('ul').slideDown('fast')
    }).mouseleave(function() {
    jQuery(this).children('ul').slideUp('fast')
});

});

将$更改为jQuery修复了问题。 nav和.nav没有任何不同。

全部谢谢！

在Joomla中显示带有jQuery的子菜单

2 个答案: