jquery - Bootstrap Dropdown - Onclick menu items, scorll to last submenu item -


i using bootstrap dropdowns.

when click on main menu "has sub menu" list item, children of list has toggle. till here working fine...

but how can do: if click on has sub menu <li> have see submenu items without scorll down... means, scorll should go end of last sub menu item...

fiddle

jquery

$('ul.dropdown-menu').on('click', function(event){     event.stoppropagation(); });  $('ul.dropdown-menu').on('click', function(){     $('.submenu').toggle(); }); 

html

<div class="btn-group" role="group" aria-label="...">     <div class="btn-group open" role="group">         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">dropdown             <span class="caret"></span>         </button>         <ul class="dropdown-menu" role="menu">             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li class="pd-dropdown">                  <a href="#" class="test">has sub menu                     <ul class="submenu">                         <li><a href="#">sub link</a></li>                         <li><a href="#">sub link</a></li>                         <li><a href="#">sub link</a></li>                         <li><a href="#">sub link</a></li>                         <li><a href="#">sub link</a></li>                         <li><a href="#">sub link</a></li>                         <li><a href="#">sub link</a></li>                         <li><a href="#">sub link</a></li>                     </ul>                 </a>             </li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>             <li><a href="#">dropdown link</a></li>         </ul>     </div> </div> 

add jquery

$('.test').on('click',function(){ console.log("gdfg");     $('ul.dropdown-menu').scrolltop(500); }); 

this demo link


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -