jquery - Open sub and sub-submenu on click -


my javascript working submenu, not sub-submenu: should hidden until click "season", opens (slides down) under parent item.

html & javascript:

$('#main-menu > ul > li:has(.dropdown-menu)').addclass('sub').on('click', function(event) {    if ($(event.target).parents('ul.dropdown-menu').length > 0) {      event.stoppropagation();    } else {      event.preventdefault();    }    $(this).find('ul').slidetoggle();  });    $('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addclass('sub').on('click', function(event) {    if ($(event.target).parents('ul.dropdown-menu-2').length > 0) {      event.stoppropagation();    } else {      event.preventdefault();    }    $(this).find('ul').slidetoggle();  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="main-menu">    <ul>      <li><a href="http://piirissaareturism.ee/">home</a>      </li>      <li><a href="http://piirissaareturism.ee/kasulik-info/">information</a>        <ul class="dropdown-menu">          <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">season</a>            <ul class="dropdown-menu-2">              <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">winter</a>              </li>              <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">spring</a>              </li>            </ul>          </li>          <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">food</a>          </li>        </ul>      </li>      <li><a href="http://piirissaareturism.ee/meist/">contact</a>      </li>    </ul>  </div>

take jsfiddle

update: common quys, there, need find out, why .find('a') (take linkinted solution) affects anchors, not "information" , "seasons"! please!

using find('ul') trigger all lists inside element.

so instead, use children('ul').

further, clicking 'seasons' closes first level submenu instead of opening second level submenu. can fix binding click event on a.

$('#main-menu > ul > li:has(.dropdown-menu)').addclass('sub').find('a').on('click', function(event) {   if ($(event.target).parents('ul.dropdown-menu').length > 0) {     event.stoppropagation();   } else {     event.preventdefault();   }   $(this).parent().children('ul').slidetoggle(); });  $('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addclass('sub').on('click', function(event) {   if ($(event.target).parents('ul.dropdown-menu-2').length > 0) {     event.stoppropagation();   } else {     event.preventdefault();   }   $(this).find('ul').slidetoggle(); }); 

updated fiddle


Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -