使用jQuery关闭触摸设备上的元素

Question

我有以下代码，当点击主导航菜单链接（.nav-landing＆gt; li）时，它会在触摸屏设备上打开div元素。如果第二次点击导航菜单链接，则链接变为活动状态并加载页面链接。这一切都运行正常，但如果用户停留在页面上并且不再需要查看div元素中的内容，我无法弄清楚如何关闭div元素（.touch-device）。

（function（$）{

var landingLink = '.nav-landing > li';

// BROWSER WITH EITHER TOUCH EVENTS OR POINTER EVENTS RUNNING ON TOUCH-CAPABLE DEVICE
if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {

    // DISPLAY LANDING PAGE MEGA NAV ON TOUCH
    $(landingLink).live('touchstart', function (e) {
        'use strict';

        var link = $(this);
        var megaDiv = $(this).find('div');

        // REMOVE touch-device CLASS IF NAV LINK HASN'T BEEN TAPPED
        if (!megaDiv.hasClass('touch-device')) {
            $('.touch-device').removeClass('touch-device');
        }

        if (link.hasClass('hover')) {
            // SECOND TOUCH
            return true;
        } else {
            // FIRST TOUCH
            link.addClass('hover');
            megaDiv.addClass('touch-device');
            $(landingLink).not(this).removeClass('hover');
            e.preventDefault();
            return false;
        }

    });

    $('.close-div').click(function () {
        //alert('clicked');
    });


} else { // STANDARD DESKTOP BROWSERS WITH MOUSE HOVER

    // DISPLAY LANDING PAGE MEGA NAV ON HOVER
    $(landingLink).has('div').hover(function () {
        $(this).addClass('hover').find('div').show();
    }, function () {
        $(this).removeClass('hover').find('div').hide();
    });
}

}）（jQuery的）;

我还设置了一个JSFiddle来展示完整的例子：

JSFiddle