JSFiddle - React, Tailwind, and code Playground

by voigtan

HTML

<a class="show">Visa</a>
<div class="test">test</div>

CSS

.test { border: 1px solid #ddd; padding: 2em; width: 30em; }

JavaScript

var hideDropdown = function (e) {
    var that = $(e.target),
        dropdown = $(e.data.target).filter(':visible'),
        check = $.isFunction(e.data.check) ? e.data.check : function() { return true; },
        isVisible = dropdown.length > 0 && (!(that.is(dropdown) || dropdown.find(that).length > 0)) && check.call(this, e);

    if (isVisible) {
        dropdown.hide();
    }
};


$(".show").on('click', function() { $('.test').show(); });
$(document).on('mouseup', {
    target: '.test',
    check: function(e) {
      console.log(this);
      console.log(e);
      return true;
    }
}, hideDropdown);