title: Dropdown Menus closing when clicking inside of container
body: <p>When I click inside of the dropdown menus, they close. </p>
  
  <p>This occurs at <code>Login menu</code> and <code>nav bar</code>. </p>
  
  <p>Im not too awfully experienced at webdeveloping but I know that its probably just some dumb error Ive overlooked a million times today. </p>
  
  <p>I believe the error is in this part of the code (expanded bellow):                                  </p>
  
  <pre><code>if (e.isDefaultPrevented()) return
        $this.attr('aria-expanded', 'false')
        $parent.removeClass('open').trigger('ontouchstart', relatedTarget)  
  </code></pre>
  
  <p>Can be seen at zunelex.com</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> var backdrop = '.dropdown-backdrop'
    var toggle   = '[data-toggle="dropdown"]'
    var Dropdown = function (element) {
      $(element).on('click.bs.dropdown', this.toggle)
    }
  
    Dropdown.VERSION = '3.3.4'
  
    Dropdown.prototype.toggle = function (e) {
      var $this = $(this)
  
      if ($this.is('.disabled, :disabled')) return
  
      var $parent  = getParent($this)
      var isActive = $parent.hasClass('open')
  
      clearMenus()
  
      if (!isActive) {
        if ('ontouchstart' in document.documentElement &amp;&amp; !$parent.closest('.navbar-nav').length) {
          // if mobile we use a backdrop because click events don't delegate
          $('&lt;div class="dropdown-backdrop"/&gt;').insertAfter($(this)).on('click', clearMenus)
        }
  
        var relatedTarget = { relatedTarget: this }
        $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
  
        if (e.isDefaultPrevented()) return
  
        $this
          .trigger('focus')
          .attr('aria-expanded', 'true')
  
        $parent
          .toggleClass('open')
          .trigger('shown.bs.dropdown', relatedTarget)
      }
  
      return false
    }
  
    Dropdown.prototype.keydown = function (e) {
      if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
  
      var $this = $(this)
  
      e.preventDefault()
      e.stopPropagation()
  
      if ($this.is('.disabled, :disabled')) return
  
      var $parent  = getParent($this)
      var isActive = $parent.hasClass('open')
  
      if ((!isActive &amp;&amp; e.which != 27) || (isActive &amp;&amp; e.which == 27)) {
        if (e.which == 27) $parent.find(toggle).trigger('focus')
        return $this.trigger('click')
      }
  
      var desc = ' li:not(.disabled):visible a'
      var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
  
      if (!$items.length) return
  
      var index = $items.index(e.target)
  
      if (e.which == 38 &amp;&amp; index &gt; 0)                 index--                        // up
      if (e.which == 40 &amp;&amp; index &lt; $items.length - 1) index++                        // down
      if (!~index)                                      index = 0
  
      $items.eq(index).trigger('focus')
    }
  
    function clearMenus(e) {
      if (e &amp;&amp; e.which === 3) return
      $(backdrop).remove()
      $(toggle).each(function () {
        var $this         = $(this)
        var $parent       = getParent($this)
        var relatedTarget = { relatedTarget: this }
  
        if (!$parent.hasClass('open')) return
  
        $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
  
        if (e.isDefaultPrevented()) return
  
        $this.attr('aria-expanded', 'false')
        $parent.removeClass('open').trigger('ontouchstart', relatedTarget)
      })
    }
  
    function getParent($this) {
      var selector = $this.attr('data-target')
  
      if (!selector) {
        selector = $this.attr('href')
        selector = selector &amp;&amp; /#[A-Za-z]/.test(selector) &amp;&amp; selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
      }
  
      var $parent = selector &amp;&amp; $(selector)
  
      return $parent &amp;&amp; $parent.length ? $parent : $this.parent()
    }
  
  
    // DROPDOWN PLUGIN DEFINITION
    // ==========================
  
    function Plugin(option) {
      return this.each(function () {
        var $this = $(this)
        var data  = $this.data('bs.dropdown')
  
        if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
        if (typeof option == 'string') data[option].call($this)
      })
    }
  
    var old = $.fn.dropdown
  
    $.fn.dropdown             = Plugin
    $.fn.dropdown.Constructor = Dropdown
  
  
    // DROPDOWN NO CONFLICT
    // ====================
  
    $.fn.dropdown.noConflict = function () {
      $.fn.dropdown = old
      return this
    }
  
  
    // APPLY TO STANDARD DROPDOWN ELEMENTS
    // ===================================
  
    $(document)
      .on('click.bs.dropdown.data-api', clearMenus)
      .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
      .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
      .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
      .on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
      .on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropdown {
    position: relative;
  }
  .dropdown-toggle:focus {
    outline: 0;
  }
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
            background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  }
  .dropdown-menu.pull-right {
    right: 0;
    left: auto;
  }
  .dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
  }
  .dropdown-menu &gt; li &gt; a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
  }
  .dropdown-menu &gt; li &gt; a:hover,
  .dropdown-menu &gt; li &gt; a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
  }
  .dropdown-menu &gt; .active &gt; a,
  .dropdown-menu &gt; .active &gt; a:hover,
  .dropdown-menu &gt; .active &gt; a:focus {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
    outline: 0;
  }
  .dropdown-menu &gt; .disabled &gt; a,
  .dropdown-menu &gt; .disabled &gt; a:hover,
  .dropdown-menu &gt; .disabled &gt; a:focus {
    color: #777;
  }
  .dropdown-menu &gt; .disabled &gt; a:hover,
  .dropdown-menu &gt; .disabled &gt; a:focus {
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  }
  .open &gt; .dropdown-menu {
    display: block !important;
    visibility: visible;
  }
  .open &gt; a {
    outline: 0;
  }
  .dropdown-menu-right {
    right: 0;
    left: auto;
  }
  .dropdown-menu-left {
    right: auto;
    left: 0;
  }
  .dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
  }
  .dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
  }
  .pull-right &gt; .dropdown-menu {
    right: 0;
    left: auto;
  }
  .dropup .caret,
  .navbar-fixed-bottom .dropdown .caret {
    content: "";
    border-top: 0;
    border-bottom: 4px solid;
  }
  .dropup .dropdown-menu,
  .navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
  }
  @media (min-width: 768px) {
    .navbar-right .dropdown-menu {
      right: 0;
      left: auto;
    }
    .navbar-right .dropdown-menu-left {
      right: auto;
      left: 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dropdown-menu" style="padding: 15px;&gt;
       &lt;form class="form-horizontal"  method="post" accept-charset="UTF-8"&gt;
       &lt;input id="sp_uname" class="form-control login" type="text" name="sp_uname" placeholder="Username.." /&gt;
       &lt;input id="sp_pass" class="form-control login" type="password" name="sp_pass" placeholder="Password.."/&gt;
       &lt;input class="btn btn-primary" type="submit" name="submit" value="login" /&gt;
       &lt;/form&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/ul&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>