title: In Bootstrap 3's table-responsive when below breakpoint dropdown menus can't be used, any assistance for my workaround is most appreciated
body: <p>Output: <a href="http://jsbin.com/APuCOwa/3" rel="nofollow noreferrer">http://jsbin.com/APuCOwa/3</a></p>
  
  <p>Edit: <a href="http://jsbin.com/APuCOwa/3/edit" rel="nofollow noreferrer">http://jsbin.com/APuCOwa/3/edit</a></p>
  
  <p>When you have a responsive table in Bootstrap 3, when you are below the 767px break point, the dropdown-menus are not accessible because they add content and the content at that size has an overflow:auto or something, so depending on the location of the menu -- if the table itself doesn't have enough height -- the menu shows up and people won't see it. Plus scrollbars are not visible until you scroll on touch.</p>
  
  <p>As a work around, which I need help with, I fudged together another toggle that doesn't close when clicked off and adds a class to the parent (to add height) when the menu is toggled (you must size the output <a href="http://jsbin.com/APuCOwa/3" rel="nofollow noreferrer">http://jsbin.com/APuCOwa/3</a> down below 767px) to see this. The problem is that when the user clicks another toggle while one is open the class added to the parent is removed, tried toggleClass and this thing (which is the same) and it's the same result. </p>
  
  <p>Essentially, when you click a toggle, it opens, adds height to the parent "table-responsive" div wrapper, and when you toggle off it undoes that, so far that's good, but if you click another menu while one is open, that is where I can't figure it out. Since they are all isolated menus, this is confusing to me.</p>
  
  <p>I am not so hot with jQuery.</p>
  
  <p>Output: <a href="http://jsbin.com/APuCOwa/3" rel="nofollow noreferrer">http://jsbin.com/APuCOwa/3</a></p>
  
  <p>Edit: <a href="http://jsbin.com/APuCOwa/3/edit" rel="nofollow noreferrer">http://jsbin.com/APuCOwa/3/edit</a></p>
  
  <p>BTW: Firefox, at least mine, has issues with jsbin, Chrome does not.</p>