javascript - 在响应式 JQuery/CSS 菜单中显示子项

Question

如果我重复了一个问题，我很抱歉......我保证我已经到处寻找这个问题的答案。

我想在响应式菜单中添加一个子菜单。我正在努力寻找一种以响应方式将子元素与主要元素一起显示的方法。

所以这是我的代码片段……CSS 仍然有点粗糙，我正在努力，只要我能用一个 slideTooggle() 显示所有菜单项；

我应该提一下我正在 Joomla 中处理这个...但是我已经检查了我的模块配置和模板，我很确定问题不在那里。但也许你有什么建议？

好的，这是我的代码片段。提前致谢! :)

$(function() {
			var pull 		= $('#pull');
				menu 		= $('nav ul');
				menuHeight	= menu.height();

			$(pull).on('click', function(e) {
				e.preventDefault();
				menu.slideToggle();
               
			});

			$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 320 && menu.is(':hidden')) {
        			menu.removeAttr('style');
        		}
    		});
		});

<nav id="menu" class="clearfix">
  <ul class="clearfix">
    <li><a class="current first-item" href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item3</a></li>
    <ul>
      <li><a href="#">Subitem 3.1</a></li>
      <li><a href="#">Subitem 3.2</a></li>
      <li><a href="#">Subitem 3.3</a></li>
    </ul>
    <li><a href="#">Item4</a></li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

这是我目前为小屏幕准备的 CSS:

nav { height: auto ; right: 15px; top: 0px; letter-spacing: 0;margin:0;position: relative;z-index: 10; margin: 0 4px 0 30px;}
	nav ul { width: 100%; display: block; height: auto;}
	nav li{ width: 50%; float: left; position: relative; z-index:10;}
	nav ul li a {display: block; padding: 25px 20px;color: #8c1b23; text-decoration: none;}
	nav li a { border-bottom: 1px solid #cccccc;}
	nav a { text-align: left; width: 100%; text-indent: 15px; }
	nav ul  { display: none; height: auto; }
	nav a#pull { display: block; background-color: #8c1b23; width: 100%; position: relative;}
	nav a#pull:after { content: ""; background: url(../images/nav-icon.png) no-repeat; width: 20px; height: 20px; display: inline-block; position: absolute; right:0;}
	
	#nav a {background: #8c1b23; color: #000; display: inline-block; font-family: 'Lato', sans-serif; font-size: 11px; line-height: 35px; padding: 0 10px; text-decoration: none; }
	#nav ul {margin-left: 0px; padding:0; float:left; height:24px; list-style: none}
	#nav ul li {list-style:none;float:left;position:relative; padding-right:0px 20px; margin:0; margin-right:5px;}
	#nav ul li a {color: #2d2a2a;display: block;font-family:  'Lato', sans-serif;font-size: 10px;font-weight: normal;padding: 0;text-align: left;border-right:none;}
	#nav ul li a:hover { color:#2d2a2a; background:none; text-decoration:none;}
	#nav ul li:hover:after { display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; margin-left: -10px; }
	#nav ul li.active > a { background: #2d2a2a; color: #ebebeb; }
	#nav ul li:hover > a { background: #ececec;  }
	#nav ul li ul {position:absolute; width:180px; left:-999em; border-top:0; margin:0; padding:0; }
	#nav ul li ul:hover  {position:absolute; width:180px; left:-999em;border-top:0; margin:0; padding:0; }
	#nav ul li:hover ul {left:0;}
	#nav ul ul ul{display:none;}
	#nav ul li ul li:hover ul {left:100%; top:0; display: block;}
	#nav ul li:hover ul {left:100%; top:0; display:none;}
	#nav ul li:hover ul li a { border:none;}
	#nav ul li:hover ul li ul li a { display:none;}
	#nav ul li ul li:hover ul li a { display:block;}

Answer 1

我认为这可能是您想要完成的:

HTML:

<nav id="menu" class="clearfix">
  <ul class="clearfix" style="display:none">
    <li><a class="current first-item" href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item3</a>
        <ul class="submenu" style="display:none">
          <li><a href="#">Subitem 3.1</a></li>
          <li><a href="#">Subitem 3.2</a></li>
          <li><a href="#">Subitem 3.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item4</a>
        <ul class="submenu" style="display:none">
          <li><a href="#">Subitem 4.1</a></li>
          <li><a href="#">Subitem 4.2</a></li>
          <li><a href="#">Subitem 4.3</a></li>
        </ul>
    </li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

JS:

$(function() {
        var pull        = $('#pull');
        menu        = $('nav > ul');
        menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();

        });

        // What I added
        $('#menu > ul > li').on('click', function(e) {
            $(this).find('.submenu').slideToggle();
        });

        // $(window).resize(function(){
        //     var w = $(window).width();
        //     if(w > 320 && menu.is(':hidden')) {
        //         menu.removeAttr('style');
        //     }
        // });
    });

此外，对于您的 CSS，我认为您存在这种误解，这导致了奇怪的事情发生。例如，nav ul 和 nav > ul 之间存在巨大差异。

nav ul 表示 nav 元素下的所有 ul 元素都遵循定义的规则。换句话说，即使 ul 元素不是 nav 元素的直接子元素，定义的 CSS 仍然适用。

nav > ul 另一方面意味着只有直接位于 nav 元素下的 ul 元素会受到影响。因此，如果您在 li 中有一个 ul，它不会受到影响。

我希望这是有道理的，让我知道菜单是否如您所愿。干杯:)

此外，这里是 jsfiddle 链接:http://jsfiddle.net/u1zpoaj7/1/