title: stopPropagation prevents bootstrap dropdown
body: <p>I use jquery to hide and show sidebar, if I click outside or resize the sidebar hide, but I fall in a problem so all my dropdown are stopped because I use stopPropagation</p>
  
  <p>My HTML is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#btn-menusb-l').click(function(e){
    e.stopPropagation();
    $('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");
   });
   $('#sdbr-l').click(function(e){
    e.stopPropagation();
   });
   $('body,html').click(function(e){
    $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');
   });
   $(window).resize(function(){
    $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ly-bmk-header
  {
     border:0;
     border-bottom:1px solid #bbb;
     margin:0 auto;
     height: 50px;
     position: relative;
     min-width: 360px;
     width: 100%;
     z-index: auto !important;
     padding: 0 10px
  }
  
  .hdr-table
  {
   display: table;
   width: 100%;
  }
  .hdr-cell
  {
   display: table-cell;
   vertical-align: middle;
  }
  
  
  
  
  .ly-bmk-layout
  {
     display: table-row;
  }
  
  .ly-bmk-cell
  {
     display: table-cell;
     vertical-align: top;
  }
  
  
  .ly-bmk-sidebar-l, .ly-bmk-sidebar-l-mob
  {
     background: #FFFFFF;
     border-right:1px solid #A6A6A6;
     margin:0;
     width: 330px;
  }
  
  .ly-bmk-content
  {
     margin:0 auto;
  }
  
  @media all and (max-width: 750px)
  {
      .ly-bmk-sidebar-l
   {position:fixed;margin-left:-340px}
   .ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob
   {margin-left:0px;position:fixed;z-index:11111;overflow-y:auto;
   -webkit-transform: translate3d(0px, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
   -ms-transition: all 0.3s linear;
   -o-transition: all 0.3s linear;
   transition: all 0.3s linear;
   height: 100%;
    top: 0;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;div class="ly-bmk-sheet"&gt;
     &lt;header class="ly-bmk-header"&gt;
      &lt;div class="hdr-table"&gt;
       &lt;div class="hdr-cell"&gt;
        &lt;nav class="ly-bmk-navc"&gt;
         &lt;ul class="ly-bmk-hmenu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Logo&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
        &lt;/nav&gt;
       &lt;/div&gt;
       &lt;div class="hdr-cell"&gt;
        &lt;nav class="ly-bmk-navc"&gt;
         &lt;ul class="ly-bmk-hmenu"&gt;
          &lt;li&gt;&lt;a id="btn-menusb-l" href="#"&gt;Sidebar&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
        &lt;/nav&gt;
       &lt;/div&gt;
       &lt;div class="hdr-cell"&gt;
        &lt;nav class="ly-bmk-navc"&gt;
         &lt;ul class="ly-bmk-hmenu"&gt;
          &lt;li class="dropdown"&gt;
           &lt;a data-toggle="dropdown"&gt;DropDwon Header&lt;/a&gt;
           &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
          &lt;/li&gt;
         &lt;/ul&gt;
        &lt;/nav&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/header&gt;
     &lt;div class="ly-bmk-layout"&gt;
      &lt;div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l"&gt;
       
        &lt;div class="ly-bmk-vmenu-content"&gt;
         &lt;ul class="ly-bmk-vmenu"&gt;
          &lt;li class="dropdown"&gt;
           &lt;a data-toggle="dropdown"&gt;DropDwon SideBar&lt;/a&gt;
           &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ly-bmk-cell ly-bmk-content"&gt;
        &lt;p&gt;WELCOME&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to keep sidebar shown if I click inside but hide if I click outside, my jquery code working except it stop my dropdown from showing </p>
  
  <ul>
  <li>Sidebar hide if width is less than 750px </li>
  <li>sidebar in header to show the sidebar if width is less than 750px</li>
  <li>dropdown inside sidebar not working but the one in header working</li>
  </ul>