CODEWITHSUNDEEP
jqueryeventsmobilejquery-mobile
Anthony James
Anthony James

Reputation: 252

jquery mobile tap event

$(function() {
    $('.quickNav').live('tap',function(event) {
        if ($(".select_body").is(":hidden")) 
        {
                $(".select_body").show(); 
        } 
        else 
        {
            $(".select_body").hide(); 
        }        
    });
});

This works fine except for once it is visible and you tap again it doesn't go away.

Thoughts?

Upvotes: 0

Views: 28511

Answers (2)

vahanpwns
vahanpwns

Reputation: 963

Once the element is hidden, its height and width are zero. This means when you tap the same place, you don't actually hit the element a second time.

I would recommend setting its opacity to zero instead. Here's kind of what you could do:

$(function() {
    $('.quickNav').live('tap',function(event) {
        if ($(".select_body").is(":hidden"))
        {
            $(".select_body").css("opacity", 1);
        } 
        else 
        {
            $(".select_body").css("opacity", 0);
        }        
    });
});

and a shorter version of the same behaviour:

$(function() {
    $('.quickNav').live('tap',function(event) {
        $(".select_body").css("opacity", 1 - parseInt($(".select_body").css("opacity")));
    });
});

I havent actually tested this code, so I don't even know if it will run!

note: fadeOut() will use hide() at the end of its animation, so it doesn't really help here.

Upvotes: 0

adardesign
adardesign

Reputation: 35681

$('.quickNav').live('tap',function(event) {
    $(".select_body").toggle(); //  toggles the visibility/display of the element.
});

this does the same as the lengthy if/else script

See toggle method documentation in the jQuery API docs.

Upvotes: 15

Related Questions