CODEWITHSUNDEEP
javascriptjquery
Paul T. Rykiel
Paul T. Rykiel

Reputation: 1227

JQuery dropdown box behavior

In the following code, the user can hover over the area and a drop down box appears. The user wants the box to disappear if the user clicks somewhere on the screen. Is there a way to accomplish this using JavaScript and jQuery?

Code below ... thank you in advance for your response.

<script type="text/javascript">

    $(document).ready(function () {
        $(".password").fancybox({
            'width': 500,
            'height': 260,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe'
        });



        // Login drop down
        $(".signin").hover(function (e) {
            e.preventDefault();
            $(".signin_menu").show();
            $(".signin").addClass("menu-open");
        });
        $(".signin_menu").hover(function (e) {
            e.preventDefault();
            $(".signin_menu").show();
            $(".signin").addClass("menu-open");
        });

Upvotes: 1

Views: 97

Answers (2)

Euan T
Euan T

Reputation: 2141

Try adding this:

$('html').on('click', function() {
    $('.signin_menu:visible').hide();
});

$('.signin_menu > *').on('click', function(event) {
    event.stopPropagation();
});

If a user clicks on an element outside of the .signin_menu, the .signin_menu will be hidden.

Upvotes: 1

tig3n
tig3n

Reputation: 49

The function .hover() can have more than 1 parameter (http://api.jquery.com/hover/)

If you put a second parameter, it will add a "hoverOut" handler.

Try this:

$(".signin").hover(function (e) {
        e.preventDefault();
        $(".signin_menu").show();
        $(".signin").addClass("menu-open");
    },function(e){
        e.preventDefault();
        $(".signin_menu").hide();
        $(".signin").removeClass("menu-open");
    });
    $(".signin_menu").hover(function (e) {
        e.preventDefault();
        $(".signin_menu").show();
        $(".signin").addClass("menu-open");
    },function(e){
        e.preventDefault();
        $(".signin_menu").hide();
        $(".signin").removeClass("menu-open");
    });

The first function is HoverIn, the second HoverOut. That way, the dropdown will disappear after you put your mouse out of the box.

Upvotes: 0

Related Questions