在 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 事件中错过了导航 class 上的点。试试对我来说很好

$('.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 的子菜单

Showing submenu with jQuery in Joomla

html

css

jquery

joomla