在子菜单中切换子菜单

Question

我正在尝试切换菜单中的项目。现在我有 3 个图标，当它们被点击时，点击图标下的 UL dropdown-mobile 打开。单击 'Main menu item' 时，'sub-menu item' 应滑动打开，单击 'sub-menu item' 时，'sub-sub-menu item' 应滑动打开。现在我似乎只能滑动打开 UL dropdown-mobile 但我不确定如何打开它以便切换其中的子菜单。

所以我有以下布局作为菜单：

// 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>

Answer 1

这应该有效，您必须使用以下条件：

// 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>

Answer 2

如果我理解正确的话：

// 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>

在子菜单中切换子菜单

Toggle submenu inside a submenu

html

jquery

menu

toggle

slidetoggle