Twitter Bootstrap Question posted in

Twitter bootstrap – Toggle submenu inside a submenu

I’m trying to toggle the items in my menu. Right now I have 3 icons and when they’re clicked the UL dropdown-mobile under the clicked icon opens. When clicked on ‘Main menu item’, the ‘sub-menu item’ should slide open and clicked on ‘sub-menu item’, ‘sub-sub-menu item’ should slide open. Now I can only seem to slide open the UL dropdown-mobile but I’m not sure how to make it so that I can toggle the submenu’s inside it.

So I have the following layout as a menu:

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

2

Answers


  1. 0

    This should work, you have to use the condition as: 

    // 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>
    Login or Signup to reply.
  2. 0

    If I understand you correctly:

    // 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search