title: Bootstrap Submenu links not working
body: <p>I have seen this question all over the place and I have implemented multiple different solutions I have found but nothing seems to be working. I have a bootstrap collapsable menu in which contains submenus. When a submenu link is clicked, it simply closes the submenu and does not redirect to the link. I have implemented the following script which I had thought would do the trick:</p>
  
  <pre><code>$('.dropdown-toggle').click(function(e) {
      e.preventDefault();
      setTimeout($.proxy(function() {
          if ('ontouchstart' in document.documentElement) {
              $(this).siblings('.dropdown-backdrop').off().remove();
          }
      }, this), 0);
  });
  </code></pre>
  
  <p>This script allows the submenus to dropdown on touchscreen devices, but the links aren't working. I tried removing the <code>e.preventDefault();</code> line, but that didn't seem to work either.</p>
  
  <p>How can I get my submenu links to work on mobile touchscreens? They work fine on the desktop and when I hold down on the link on touchscreens I am able to open the correct link up in a new tab, but it doesn't work when you just tap it.</p>
  
  <p><strong>EDIT:</strong> Here is my a piece of the HTML:</p>
  
  <pre><code>&lt;div class="span3"&gt;
      &lt;li class="dropdown-submenu"&gt;
          &lt;a href="#" tabindex='-1' class="dropdown-toggle nav-header" data-toggle="dropdown"&gt;&lt;i class='icon-time'&gt;&lt;/i&gt;Time Clock Management&lt;/a&gt;
          &lt;ul class='dropdown-menu'&gt;
              &lt;li&gt;&lt;a href="#"&gt;Labor Scheduling&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/change-manager/"&gt;Change Manager&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>