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
Post a Comment