JSFiddle - React, Tailwind, and code Playground

by JSDavi

HTML

<script src="https://dl.dropboxusercontent.com/s/di6zxli809uapxq/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/sodiwdcbcx1plgo/bootstrap.min.css">
 <header class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a href="#"><h1>Branding</h1></a>
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">Menu Item 1</a></li>
                    <li id="dropdown1" class="dropdown">                    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> 		
                        <ul class="dropdown-menu">
                            <li><a id="item1" href="#">Dropdown Item 1</a></li>
                            <li><a href="#">Dropdown Item 2</a></li>
                            <li><a href="#">Dropdown Item 3</a></li>  
                            <li><a href="#">Dropdown Item 4</a></li>                           
                        </ul>
                    </li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</header>

JavaScript

$('#item1').on('click', function(event){
   event.stopPropagation();
});