EDIT: I tried GLK.net's link but I could not manage to get this to work. It would simply break my function.
I have a span element where, if you click it, it will toggle a ul (first click = show / second click = hide).
I want it so, if the ul is shown, the user should be able to click outside of the element (so, the document / html) to hide the list.
Here is my code:
btw, the $('hmtl').css('cursor', 'pointer'); is used for iOS.
(function($) {
$.fn.styledDropdown = function() {
var obj = $('#tag-cloud');
obj.find('.field').click(function() { // onclick event, show wp-tag
if (obj.find('.wp-tag-cloud').is(':hidden')) {
obj.find('.wp-tag-cloud').show();
obj.find('i').attr('class', 'icon-eqtri-up');
$('html').css('cursor', 'pointer');
$(document).keyup(function(event) { // keypress event, hide wp-tag list
if(event.keyCode == 27) {
obj.find('.wp-tag-cloud').hide();
obj.find('i').attr('class', 'icon-eqtri-down');
$('html').css('cursor', 'default');
}
});
} else {
obj.find('.wp-tag-cloud').hide();
obj.find('i').attr('class', 'icon-eqtri-down');
$('html').css('cursor', 'default');
}
});
obj.find('.wp-tag-cloud li a').click(function() { // onclick event, change field value with selected list item and show list
obj.find('.field').html( $(this).html() + '<i class="icon-eqtri-down"></i>' );
obj.find('.wp-tag-cloud').hide();
$('html').css('cursor', 'default');
});
};
})(jQuery);
Any help with this would be greatly appreciated.
- Code has been adapted from an example at css-tricks.com
