时间戳

首页 > 解决方案 > jquery控制的多级html菜单

jquery - jquery控制的多级html菜单

问题描述

我正面临多级菜单的问题。我需要 jQuery 来显示或隐藏当前选定的子菜单，并保持其他没有变化。我对 JQuery 还不是很熟练，所以任何帮助都将不胜感激。我在这里与你分享我所拥有的。提前致谢！

我想提一下，我在 StackOverflow 上找到了一个部分工作的示例。经过一些调试后，我意识到var mobileMenu.css返回undefined，这使得代码有时可以工作。

var test1 = $('ul.hdrMenu li');

test1.on( 'click', function(e) 
{   
    var mobileMenuItem  = $(e.target).parent().find( '> ul.sub-menu' );

    if( **typeof mobileMenuItem.css('display') === "undefined"** )
    {
        mobileMenuItem  = $(e.target).parent().parent().find( '> ul.sub-menu' );          
    }

    if( mobileMenuItem.css('display') == 'none' ) 
    {
        e.preventDefault();
        mobileMenuItem.slideDown();
        e.stopPropagation();
    } 
    else if( mobileMenuItem.css('display') == 'block' ) 
    {
        e.preventDefault();
        mobileMenuItem.slideUp();
        e.stopPropagation();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hdrMenu">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Servicios</a>
    <ul class="sub-menu">
      <li><a href="#">L1</a></li>
      <li><a href="#">L2</a>
        <ul class="sub-menu">
          <li><a href="#">L2-1</a></li>
          <li><a href="#">L2-2</a></li>
        </ul>
      </li>
      <li><a href="#">L3</a></li>
      <li><a href="#">L4</a>
        <ul class="sub-menu">
          <li><a href="#">L4-1</a></li>
          <li><a href="#">L4-4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Acerca de</a>
    <ul class="sub-menu">
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub4</a></li>
    </ul>
  </li>
  <li><a href="#">Contacto</a></li>
</ul>

标签： jqueryhtml

解决方案

代码工作得很好我认为你只需要删除父选择器.hdrNav就可以了：

var test1 = $('ul.hdrMenu li');

或者您可以保留选择器的原样并添加一个带有 class 的父 div hdrNav。

var test1 = $('ul.hdrMenu li');
test1.on('click', function(e) {
  var mobileMenu = $(e.target).parent().find('> ul.sub-menu');

  if (mobileMenu.css('display') == 'none') {
    e.preventDefault();
    mobileMenu.slideDown();
    e.stopPropagation();
  } else if (mobileMenu.css('display') == 'block') {
    e.preventDefault();
    mobileMenu.slideUp();
    e.stopPropagation();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hdrMenu">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Servicios</a>
    <ul class="sub-menu">
      <li><a href="#">L1</a></li>
      <li><a href="#">L2</a>
        <ul class="sub-menu">
          <li><a href="#">L2-1</a></li>
          <li><a href="#">L2-2</a></li>
        </ul>
      </li>
      <li><a href="#">L3</a></li>
      <li><a href="#">L4</a>
        <ul class="sub-menu">
          <li><a href="#">L4-1</a></li>
          <li><a href="#">L4-4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Acerca de</a>
    <ul class="sub-menu">
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub4</a></li>
    </ul>
  </li>
  <li><a href="#">Contacto</a></li>
</ul>

推荐阅读