響應式網站上的CSS下拉菜單導致移動電話出現問題

Question

我的任務是使用一個使用CSS下拉菜單並使其響應的網站。 由於手機沒有懸停事件，我使用Modernizr在菜單中添加類來顯示/隱藏它們。 這很好用。 問題是觸摸父元素仍會導致手機導航到父元素，因此除非您超快，否則您無法單擊菜單中顯示的子項。 返回false和preventDefault都在我的iphone模擬器上工作但在真實設備（android和iphone）上失敗。

//make sure main nav links don't take you anywhere on mobile

$('#a-popular-main-nav').on('touchend', function(event) {
    event.preventDefault();
    return false;
});

$('#a-profile-main-nav').on('touchend', function(event) {
    event.preventDefault();
    return false;
});


if (Modernizr.touch) {
    $('.menu').each(function () {
        var $lis = $(this).find('li');
        $lis.on('touchend', function(event) {

            var $this = $(this);
            if ($this.hasClass('activated')) {
                $this.removeClass('activated');
            }
            else {
                $lis.removeClass('activated');
                $this.addClass('activated');
            }
            event.stopPropagation();

       });

        //close menus if touched outside the menu
       $('body').on('touchend', function() {
               $lis.removeClass('activated');
       });


    });

};

我已經嘗試了stopPropagation，preventDefault和return false的每個組合。 有沒有人遇到過這個？

Answer 1

所以答案就在於第一部分代碼。 問題在於touchend事件。 我試圖阻止的默認實際上屬於click事件，所以這里是我改變代碼的方式。 很容易解決。

$('#a-popular-main-nav').on('click', function(event) {
    event.preventDefault();
});

$('#a-profile-main-nav').on('click', function(event) {
    event.preventDefault();
});

Answer 2

我已經完成了大量的響應式設計，並找到了最佳解決方案，這是Chris Coyier為移動設備選擇菜單的方法。 這樣你就可以利用每個手機對選擇菜單的本機處理，這在大多數情況下比任何jQuery黑客都要好得多（更重要的是可預測 ）。

http://css-tricks.com/convert-menu-to-dropdown/

希望有所幫助

Answer 3

我最近一直在尋找響應式css下拉菜單。 這個下拉似乎在我的iPhone上正常工作： http ： //matthewjamestaylor.com/blog/centered-dropdown-menus#

但需要一些造型工作和一個錯誤照顧（當你“懸停”/點擊某個李時，lis似乎會移動。祝你好運。