切換子菜單內的子菜單

我在切換菜單中的項目。現在我有3個圖標，當點擊圖標時，UL下拉式移動設備打開。當點擊'主菜單項'時，'子菜單項'應該滑動打開並點擊'子菜單項'，'子 - 子菜單項'應該滑動打開。現在，我只能滑動打開UL下拉式手機，但我不確定如何製作，以便我可以在其中切換子菜單。切換子菜單內的子菜單

所以，我有以下佈局的菜單：

// slideToggle for mobile mainmenu 
 
$('li.icons-list').click(function(e) { 
 
    if ($(this).siblings('li.hovertest').find('ul.dropdown-mobile:visible').length) { 
 
    $('ul.dropdown-mobile').slideUp('slow'); 
 
    } 
 
    $(this).find('ul.dropdown-mobile').slideToggle('slow'); // show the respective one. 
 
});

<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
<ul id="icons-wrapper"> 
 
    <li class="icons-list"><i class="drop-down fa fa-bars"></i> 
 
    <ul class="dropdown-mobile"> 
 
     <li class="hovertest"><i class="fa fa-chevron-right pull-right"></i> 
 
     <a href="#">MAIN MENU ITEM</a> 
 
     <ul class="subsubmenu-mobile"> 
 
      <li> 
 
      <a href="#">SUB-MENU ITEM</a> 
 
      <ul class="subsubmenu-second-mobile"> 
 
       <li> 
 
       <a href="#">SUB-SUB-MENU ITEM</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="icons-list"> 
 
    <i class="drop-down fa fa-search"></i> 
 
    <ul class="dropdown-mobile"> 
 
     <div class="header-search-mobile"> 
 
     <form role="search" action="" method="get" name=""> 
 
      <label class="visually-hidden" for="q">Search</label> 
 
      <input type="text" id="q" name="q" value="" placeholder="Search" /> 
 
      <input type="submit" value="go" class="submit-btn" /> 
 
     </form> 
 
     </div><!-- end header-search --> 
 
    </ul> 
 
    </li> 
 

 
    <li class="icons-list"> 
 
    <i class="drop-down fa fa-map-marker"></i> 
 
    <ul class="dropdown-mobile"> 
 
     Google maps 
 
    </ul> 
 
    </li> 
 
</ul>

來源

2015-12-21 Stefan Neuenschwander

這應該工作，你必須使用條件爲：

// slideToggle for mobile mainmenu 
 
$('#icons-wrapper li').click(function(e) { 
 
    var $this = $(this); 
 
    if ($(this).children('ul:visible').length) { 
 
    $(this).find('> ul:visible').stop().slideUp('slow'); 
 
    } else { 
 
    $(this).children('ul').stop().slideToggle('slow'); 
 
    } 
 
    return false; 
 
});

ul ul { 
 
    display: none; 
 
}

<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
<ul id="icons-wrapper"> 
 
    <li class="icons-list"><i class="drop-down fa fa-bars"></i> 
 
    <ul class="dropdown-mobile"> 
 
     <li class="hovertest"><i class="fa fa-chevron-right pull-right"></i> 
 
     <a href="#">MAIN MENU ITEM</a> 
 
     <ul class="subsubmenu-mobile"> 
 
      <li> 
 
      <a href="#">SUB-MENU ITEM</a> 
 
      <ul class="subsubmenu-second-mobile"> 
 
       <li> 
 
       <a href="#">SUB-SUB-MENU ITEM</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="icons-list"> 
 
    <i class="drop-down fa fa-search"></i> 
 
    <ul class="dropdown-mobile"> 
 
     <div class="header-search-mobile"> 
 
     <form role="search" action="" method="get" name=""> 
 
      <label class="visually-hidden" for="q">Search</label> 
 
      <input type="text" id="q" name="q" value="" placeholder="Search" /> 
 
      <input type="submit" value="go" class="submit-btn" /> 
 
     </form> 
 
     </div> 
 
     <!-- end header-search --> 
 
    </ul> 
 
    </li> 
 

 
    <li class="icons-list"> 
 
    <i class="drop-down fa fa-map-marker"></i> 
 
    <ul class="dropdown-mobile"> 
 
     Google maps 
 
    </ul> 
 
    </li> 
 
</ul>

來源

2015-12-21 13:53:23 Jai

感謝您的快速回答潔，但由於某些原因，它完全停止往下滑，我完全不知道爲什麼 –

@StefanNeuenschwander好讓我查它 – Jai

@StefanNeuenschwander是你想要的。檢查代碼段 – Jai

如果我理解正確：

// slideToggle for mobile mainmenu 
 
$('#icons-wrapper li').click(function(e) { 
 
    e.stopPropagation(); 
 
    $(this).find('>[class*="subsubmenu-"]').slideToggle('slow'); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
<ul id="icons-wrapper"> 
 
    <li class="icons-list"><i class="drop-down fa fa-bars"></i> 
 
    <ul class="dropdown-mobile"> 
 
     <li class="hovertest"><i class="fa fa-chevron-right pull-right"></i> 
 
     <a href="#">MAIN MENU ITEM</a> 
 
     <ul class="subsubmenu-mobile"> 
 
      <li> 
 
      <a href="#">SUB-MENU ITEM</a> 
 
      <ul class="subsubmenu-second-mobile"> 
 
       <li> 
 
       <a href="#">SUB-SUB-MENU ITEM</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="icons-list"> 
 
    <i class="drop-down fa fa-search"></i> 
 
    <ul class="dropdown-mobile"> 
 
     <div class="header-search-mobile"> 
 
     <form role="search" action="" method="get" name=""> 
 
      <label class="visually-hidden" for="q">Search</label> 
 
      <input type="text" id="q" name="q" value="" placeholder="Search" /> 
 
      <input type="submit" value="go" class="submit-btn" /> 
 
     </form> 
 
     </div><!-- end header-search --> 
 
    </ul> 
 
    </li> 
 
    <li class="icons-list"> 
 
    <i class="drop-down fa fa-map-marker"></i> 
 
    <ul class="dropdown-mobile"> 
 
     Google maps 
 
    </ul> 
 
    </li> 
 
</ul>

來源

2015-12-21 14:08:24

也按我的意思工作！艱難的'圖標'不再滑動了，所以我會在Jai的解決方案上設置答案，但子菜單thingy按照我的意願工作。謝謝您的幫助！ –

切換子菜單內的子菜單

回答

相關問題