jScrollPane not woring on Bootstrap 3 dropdown

Question

I am trying to display vertical scroll on bootstrap drop down. Here is my HTML code

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle btn_drop_down" data-toggle="dropdown"><span class="pull-left">Dropdown</span> <span class="caret arrow pull-right"></span></button>
  <div class="dropdown-menu my_dropdown" role="menu">
    <ul>
      <li><a href="#" class="first">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
    </ul>
  </div>
</div>

I know jScrollPane does not work on hidden contents so I am using following jQuery code for this purpose

$(function()
{
    //$('.my_dropdown').jScrollPane(); //does not work
    $('.dropdown-toggle').click(function(){
        //$('.my_dropdown').dropdown('toggle').jScrollPane(); //does not work
        //$('.my_dropdown').dropdown().jScrollPane(); //only shows dropdown  but without scrollbar
        $('.my_dropdown').dropdown().show().jScrollPane(); //works but dropdown does not close

    });

});

Only last javascript statement is working but it does not close dropdown menu. Is there anyway I can fix this?

Answer 1

I was able to solve it by myself. Here is the solution if anyone needs it!

$('.dropdown-toggle').click(function(){
    var element = $('.my_dropdown').dropdown().jScrollPane({'autoReinitialise':true, 'autoReinitialiseDelay':true, 'animateScroll': true});
    element.reinitialise();

});