title: Need to cancel hiding a dropdown menu when clicking inside a modal in Bootstrap
body: <p>Here is a thing I'm fighting against right now. 
  I have a dropdown menu for displaying several user information. (maybe not the best way, I know) .. while in there, you can click several tabs which will show activity records, etc .. from ajax. This is done by not letting any elements within the dropdown menu to close said dropdown, like this</p>
  
  <pre><code>$('.me-container').on('click', '.dropdown-menu', function(evt){
    $(this).parent().is('.open') &amp;&amp; evt.stopPropagation();
  });
  </code></pre>
  
  <p>But there is the chance of a user wanting to edit their profile picture, and we want to use a bootstrap modal to show the whole ui for that. </p>
  
  <p>When you click in whatever link, button or ui element in this modal, the dropdown element closes/hides but I'd like to keep it open .. </p>
  
  <p>I'm sure this would be something with preventing the event from happening if the event target is not relative to the dropdown, but can't get my head around it .. </p>
  
  <p>Any help?</p>