Blurring and Clicking conflict

Question

I have a clicking issue with jquery. When I click the search button (#mini-panel-quick_menu .panel-col-last) a search bar slides down from the top of the screen (#block-search-form). The "open" class makes the margin 0. It's -4.5em by default and css transition does the sliding.

        $('#mini-panel-quick_menu .panel-col-last.off').click(function() {
            $(this).removeClass('off');
            $( '#block-search-form' ).addClass( "open" );
            $('#edit-search-block-form--2').focus();
            $(this).addClass('on');
        });
        $('#mini-panel-quick_menu .panel-col-last.on').click(function() {
            $(this).removeClass('on');
            $( '#block-search-form' ).removeClass( "open" );
            $('#edit-search-block-form--2').blur();
            $(this).addClass('off');
        });

        $('#edit-search-block-form--2').blur(function(){
            if ($('#mini-panel-quick_menu .panel-col-last').hasClass('on')){
                $('#mini-panel-quick_menu .panel-col-last').removeClass('on');
                $('#mini-panel-quick_menu .panel-col-last').addClass('off');
                $( '#block-search-form' ).removeClass( "open" );
            };
        });

The whole thing works fine. It'll open and when I blur the input box it closes. If I click the search button it'll open and close as expected. The problem is when I click AND release on the search button while the search bar is open. Mousedown is blurring the input while mouseup is triggering the click.

Is there a way so blur will do what it's supposed to except when clicking on the button? Or is there a better way to do what I've been doing? I've tried changing the clicks to mousedowns (which doesn't work because blur and mousedown act at the same time) and mouseups(which is the same as the default click) but it doesn't help.

Answer 1

.mouseout() or .mouseleave() functions will help.