CODEWITHSUNDEEP
jquerycssmobileonclicklistener
StudioTime
StudioTime

Reputation: 23989

(document).click not hiding div on mobile device

I have a second level menu which works perfectly on a desktop on hover, hiding divs when no hover on main menu items.

So, for a mobile/touch device I need any click away from the dropdown to close it but what i;m trying is not hiding the UL, also when I click away on a desktop, the hover no longer shows the dropdown UL

here's the html

<body>
    <div id="top">
            <div id="menu" class="wrap">
                <ul id="nav">
                    <li><a href="#">My Lists</a>
                        <ul class="drop">
                            <li><a href="#">List 1</a></li>
                            <li><a href="#">List 2</a></li>
                            <li><a href="#">List 3</a></li>
                            <li><a href="#">View all Lists</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Following</a>
                        <ul class="drop">
                            <li><a href="#">Follow 1</a></li>
                            <li><a href="#">Follow 2</a></li>
                            <li><a href="#">Follow 3</a></li>
                            <li><a href="#">View all Follows</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
</body>

And the JQUERY

        $(document).click(function() {
        $('.drop').hide();
    });
    $(".drop, #nav").click(function(e) {
        e.stopPropagation();
        return false;
    });

Heres a fiddle, easier to show this way plus with all css: Fiddle

Upvotes: 0

Views: 938

Answers (2)

Sathya Raj
Sathya Raj

Reputation: 1089

if you are using jqm then try vclick events for your mobile app or mobile web i.e

$(document).vclick(function() {
        $('.drop').hide();
    });
    $(".drop, #nav").vclick(function(e) {
        e.stopPropagation();
        return false;
    });

i have just modified your event alone .maybe u have to use standard jqm events from this documentation for better performance.

Upvotes: 0

Vytautas Butkus
Vytautas Butkus

Reputation: 5535

That is because mobile devices don't have clicks. Try binding "touchstart" event for mobile devices to work.

Like so:

$(document).on("click touchstart", function() {
    $('.drop').hide();
});
$(".drop, #nav").on("click touchstart", function(e) {
    e.stopPropagation();
    return false;
});

Upvotes: 1

Related Questions