JSFiddle - React, Tailwind, and code Playground

by Malitta Nan

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="dropdown">
    <a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
        Toggle dropdown
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu dropdown-menu-form" role="menu">
        <li>
            <label class="checkbox">
                <input type="checkbox">
                Checkbox 1
            </label>
        </li>
        <li>
            <label class="checkbox">
                <input type="checkbox">
                Checkbox 2
            </label>
        </li>
        <li>
            <label class="checkbox">
                <input type="checkbox">
                Checkbox 3
            </label>
        </li>
        <li>
            <label class="checkbox">
                <input type="checkbox">
                Checkbox 3
            </label>
        </li>
        <li>
            <label class="checkbox">
                <input type="checkbox">
                Checkbox 3
            </label>
        </li>
        <li>
            <label class="checkbox">
                <input type="checkbox">
                Checkbox 3
            </label>
        </li>
    </ul>
</div>

CSS

ul.dropdown-menu-form {
    padding: 5px 10px 0;
    max-height: 300px;
}

JavaScript

$('.dropdown-menu').on('click', function(e) {
    if($(this).hasClass('dropdown-menu-form')) {
        e.stopPropagation();
    }
});