<span class="dropdown"> <ul class="dropdown-menu">

How can I close the bootstrap tab when scrolling?

  • see in the code how it opens and close accordingly, catching the scroll event at the right moment - lexxl
  • You are talking about tabs , and in the code - dropdown list. What is still needed? - Gleb Kemarsky

1 answer 1

To open the list, the parent hangs the .open class. If you remove it, the list closes. You can make, for example, an event handler for scrolling a window. If you need to switch the status of a specific drop-down list, you can use $('селектор').dropdown('toggle') .

 $(window).scroll(function(e) { var dropdowns = $('.dropdown-toggle'); $.each(dropdowns, function(i, c) { $(c).parent().removeClass('open'); }) }) 
 body { height: 1000px; } .btn-group { margin-top: 100px; margin-left: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> </ul> </div>