Javascript/jQuery watch for CSS Changes

EDIT: There is no css change event so you'll have to approach the problem in 1 of 2 ways.

• check the dom element in set intervals to see if its css has changed

• trigger an event when the css of the dom element is changed by user interaction/your code.

the first way will look something like this:

var element = $(".dropdown-menu");
function checkForChanges()
{
    if (element.css('display') == 'block')
    {
        // do your .focus() stuff here
    }
    setTimeout(checkForChanges, 500); // does this every half second.
}

or the second way:

$('.toggle').on('click', function() {
    $('.dropdown-menu').toggle();
    $('.dropdown-menu').trigger('change');
});
$('.dropdown-menu').on('change', function(){
    if($(this).css(.css('display') == 'block')
    {
        // do your .focus() stuff here
    }
});

You can check the display value of the ul using pure JavaScript with this:

JS:

var display = document.getElementById('dropdown-menu')[0].style.display;
if (display === 'block') {
  //do what you want.
}

Or using jQuery:

if ($('.dropdown-menu').css('display') === 'block') {
   //do what you want.
}

It looks like you are using bootstrap to create the dropdown. If that is the case you can use the "shown" event. However you need to attach the event on a container element.

Html

<div class="quickSearchContainer">
    <a href="#" id="quickSearch" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Quick Search</a>
    <ul class="dropdown-menu" role="menu">
        <li id="li-quicksearch">
            <form id="mainSearch" class="form-search">
                <p>
                    <input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
                    <button type="submit">SUBMIT</button>
                </p>
            </form>
        </li>
    </ul>
</div>

Javascript

$('#quickSearchContainer').on('show.bs.dropdown', function () {
    $('#inputSearch').focus();
});

I want to thank everyone for their input, but the working solution that I found was to modify the bootstrap JS to allow for an autofocus on toggleClass of the OPEN for the dropdowns. Everyone gets kudos!