JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="dropDownLink">Locality
        <ul class="dropDown">
            <li class="dropDown-row">
                <input type="text" />
            </li>
        </ul>
    </li>
    <li class="dropDownLink">Locality
        <ul class="dropDown">
            <li class="dropDown-row">
                <input type="checkbox" />Option 1</li>
            <li class="dropDown-row" />
            <input type="checkbox" />Option 2</li>
    <li class="dropDown-row">
        <input type="checkbox" />Option 3</li>
    </ul>
    </li>
</ul>

JavaScript

//Alexander Dixon 08-01-2015 - Stack Overflow Solution
//Hide Navigation menu on document Click
//http://stackoverflow.com/questions/31765167/clicking-on-dropdown-content-dropdown-getting-hide
var $dropShow = function showList() {
    $('.dropDownLink').on('click', function () {
        $('.dropDown').hide();
        $(this).children($('.dropDown')).show();
    });
};


var $bodyClick = function hideAll() {
    $(this).on('click', function (e) {
        if (!$navSelections.is(e.target)) {
            $('.dropDown').slideUp(150);
        }
    });
};

$('.dropDownLink').not($navSelections).click($dropShow());
$('*').not($navSelections).click($bodyClick());