在響應式jQuery/CSS菜單中顯示子項目

Question

如果我複製問題，我很抱歉...承諾我已到處尋找答案。

我在添加一個子菜單到響應菜單。我正在努力尋找一種方法來以響應的方式顯示子項目和主要項目。

所以這裏是我的代碼片段... CSS仍然有點粗糙，我一直在努力，只要我能用一個slideTooggle（）顯示我的所有菜單項;

我應該提到我在Joomla工作......但是我檢查了我的模塊配置和模板，我很確定問題不在那裏。但是，也許你有一個建議？

好的，這是我的代碼片段。提前致謝！ :)

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

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

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

<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;} 
 
\t nav ul { width: 100%; display: block; height: auto;} 
 
\t nav li{ width: 50%; float: left; position: relative; z-index:10;} 
 
\t nav ul li a {display: block; padding: 25px 20px;color: #8c1b23; text-decoration: none;} 
 
\t nav li a { border-bottom: 1px solid #cccccc;} 
 
\t nav a { text-align: left; width: 100%; text-indent: 15px; } 
 
\t nav ul { display: none; height: auto; } 
 
\t nav a#pull { display: block; background-color: #8c1b23; width: 100%; position: relative;} 
 
\t nav a#pull:after { content: ""; background: url(../images/nav-icon.png) no-repeat; width: 20px; height: 20px; display: inline-block; position: absolute; right:0;} 
 
\t 
 
\t #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; } 
 
\t #nav ul {margin-left: 0px; padding:0; float:left; height:24px; list-style: none} 
 
\t #nav ul li {list-style:none;float:left;position:relative; padding-right:0px 20px; margin:0; margin-right:5px;} 
 
\t #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;} 
 
\t #nav ul li a:hover { color:#2d2a2a; background:none; text-decoration:none;} 
 
\t #nav ul li:hover:after { display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; margin-left: -10px; } 
 
\t #nav ul li.active > a { background: #2d2a2a; color: #ebebeb; } 
 
\t #nav ul li:hover > a { background: #ececec; } 
 
\t #nav ul li ul {position:absolute; width:180px; left:-999em; border-top:0; margin:0; padding:0; } 
 
\t #nav ul li ul:hover {position:absolute; width:180px; left:-999em;border-top:0; margin:0; padding:0; } 
 
\t #nav ul li:hover ul {left:0;} 
 
\t #nav ul ul ul{display:none;} 
 
\t #nav ul li ul li:hover ul {left:100%; top:0; display: block;} 
 
\t #nav ul li:hover ul {left:100%; top:0; display:none;} 
 
\t #nav ul li:hover ul li a { border:none;} 
 
\t #nav ul li:hover ul li ul li a { display:none;} 
 
\t #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，我覺得你有這種誤解，這是造成時髦的事情發生。例如，B/W nav ul和nav > ul有很大差異。

nav ul表示nav元素下的所有ul元素都遵循定義的規則。換句話說，即使ul元素不是nav元素的DIRECT子元素，定義的CSS仍然適用。

nav > ul另一方面意味着只有ul元素直接在nav元素下才會受到影響。所以如果您在li內有ul，它不會受到影響。

我希望這是有道理的，讓我知道，如果菜單按照你想要的。乾杯:)

而且，這裏的的jsfiddle鏈接：http://jsfiddle.net/u1zpoaj7/1/