JSFiddle - React, Tailwind, and code Playground

by pthrasher

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<div class="topbar">
    <div class="fill">
        <div class="container">
            <a class="brand" href="#">Project name</a>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <ul class="nav secondary-nav">
                <li class="dropdown" data-dropdown="dropdown">
                    <a href="#" class="dropdown-toggle">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li class="no-close">
                            <form>
                                <div class="clearfix">
                                    <input type='text' placeholder='Username' class='span3 no-close' />
                                    <input type='text' placeholder='Password'class='span3 no-close' />
                                </div>
                            </form>
                        </li>
                        <li class="divider"></li>
                        <li><button type='submit' class='btn primary'>Login</button></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

JavaScript

/* ============================================================
 * bootstrap-dropdown.js v1.3.0
 * http://twitter.github.com/bootstrap/javascript.html#dropdown
 * ============================================================
 * Copyright 2011 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============================================================ */


!function( $ ){

  var d = 'a.menu, .dropdown-toggle'

  function clearMenus(e) {
    var _parent = $(d).parent('li')
    if (e != undefined) {
      var srcEl = e.srcElement
        , isInput = $(srcEl).hasClass('no-close')
        , insideParent = _parent.has(srcEl).length > 0
      if (isInput && insideParent) return
    }
    _parent.removeClass('open')
  }

  $(function () {
    $('html').bind("click", clearMenus)
    $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
  })

  /* DROPDOWN PLUGIN DEFINITION
   * ========================== */

  $.fn.dropdown = function ( selector ) {
    return this.each(function () {
      $(this).delegate(selector || d, 'click', function (e) {
        var li = $(this).parent('li')
          , isActive = li.hasClass('open')

        clearMenus(e)
        !isActive && li.toggleClass('open')
        return false
      })
    })
  }

}( window.jQuery || window.ender )