clicking on dropdown content, dropdown getting hide

Question

HTML code for dropdowns:

 

   Locality
   

     


        

Answer 1

Updated with exact solution: The advice of super specific DOM element targeting still stands. jsFiddle Example

var $dropShow = function showList() {
    $('.dropDownLink').on('click', function () {
        $('.dropDown').hide();
        $(this).children($('.dropDown')).show();
    });
};
var $navSelections = $('li.dropDown-row input, li.dropDown-row, ul.dropDown li.dropDown-row input, li.dropDownLink, ul li.dropDownLink');

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());

Pinpoint the pathing that you want the action to occur on only. If it is only supposed to occur, for example on a div, then use $('div.dropDownLink'). If it is only links in say, a navMenu that you want this functionality applied to, then you use $('navMenu div.dropDownLink'). Essentially, the more accurate your selector the better the results will be.

If however, you would like to take the not so accurate approach you can use the .not() method to leave out very specific things.

var $parentOfDropDown = $('div#navMenu');
$('.dropDown').not($parentOfDropDown).hide();