Drop-down menu button highlighting and hiding I'm learning JS/jQuery at the moment and have built the following standalone script but I feel that it can probably be improved in some ways?

For example - is there a better way of switching the selected text on the .dropdown-menu li a click event rather than needing to replace the entire HTML?

Constructive advice welcome.

EDIT: Added HTML to help with context:

&lt;div class="dropdowncontain"&gt;
    &lt;button type="button" class="button defaultbutton"&gt;Default Value &lt;span class="caret invert"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Katie&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Richard&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Matthew&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sophie&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown-divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Default Value&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="dropdowncontain"&gt;
    &lt;button type="button" class="button primarybutton"&gt;Click Me &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Katie&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Richard&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Matthew&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sophie&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
&lt;/div&gt;


So currently the script checks if the user is clicking in a dropdown menu that needs an inverted caret.

$(function() {
// Handles initial dropdown click event, if any dropdown menu is visible close it
$('.dropdowncontain').click(function(e){
    if (!$('.dropdown-menu', this).is(':visible')) {
        $('.dropdown-menu').hide();
    }
    $('.dropdown-menu', this).toggle();
    // Stop the bubbling of the event to the document level
    e.stopPropagation(); 
});

// Handles hiding the dropdown menu's when the user clicks elsewhere in the document
$(document).click(function() {
    $('.dropdown-menu').hide();
});

// Handles updating the text in the button and highlighting the selected option
$('.dropdown-menu li a').click(function(e){
    var parentBtn = $(this).parents('.dropdowncontain').find('.defaultbutton');
    var that = $(this).parents('.dropdowncontain').find('.dropdown-menu li a');
    var selectedText = $(this).text();

        if (that.hasClass('highlightdropdown')){
            that.removeClass('highlightdropdown');
        }

    $(this).addClass('highlightdropdown');  

    // If the containing parent div has a class with 'defaultbutton' add the invert class to the caret
    if (parentBtn.hasClass('defaultbutton')) {
        $(this).parents('.dropdowncontain').find('.button').html(selectedText+' &lt;span class="caret invert"&gt;&lt;/span&gt;');
    }
    else {
        $(this).parents('.dropdowncontain').find('.button').html(selectedText+' &lt;span class="caret"&gt;&lt;/span&gt;');
    }
    // Prevent the page jumping to the top when a link with no source is selected
    e.preventDefault();
});
});
There is no reason to swap the text, find the span in the button and toggle the class

var isDefault = parentBtn.hasClass('defaultbutton')
$(this).parents('.dropdowncontain').find('.button .caret').toggleClass("invert", isDefault);


The context selector is a bad idea

$('.dropdown-menu', this)


It is slow. Use find()

$(this).find('.dropdown-menu')


Another thing, $(this) is used over and over again. That is bad practice. It creates a new jQuery object each time. Store it in a variable and reuse that variable.

var myElement = $(this);
myElement.find('.dropdown-menu')...