2016-08-03 9 views
1

私は多くの問題を抱えている従来のウェブサイトに取り組んでいますが、そのうちの1つは本当に刺激的で混乱しています。 jQueryの条件を使って単純にトグルするドロップダウンメニューがあります。タッチイベントでドロップダウンメニューが消える

問題は - iPhone/Androidで開いて残りのメニュー項目を見るためにスクロールしようとすると、メニューが消えます。ここで

は、それをロードするスクリプトです:

/* MOBILE COLLAPSE MENU */ 
;(function ($) { 
    $.fn.collapsable = function (options) { 
    // iterate and reformat each matched element 
    return this.each(function() { 
    // cache this: 
    var obj = $(this) 
    var tree = obj.next('.mobile_navigation') 
    obj.click(function() { 
    if (obj.is(':visible')) {tree.toggle();} 
    }) 
    $(window).resize(function() { 
    if ($(window).width() <= 480) {tree.attr('style', '');} 
    }) 
}) 
} 
})(jQuery) 

が、私はこれをどのように修正することができますか?私はそれが小さいビューポートをロードしているので、$(window).resize関数と何か関係があると推測しますが、それについて何をすべきか分かりません。

+1

を試してみてください..あなたが二回jqueryライブラリのインポートをインポートしている再確認してくださいボタン。 –

+2

サイズ変更の部分にコメントしましたか?私はこれがあなたの問題がどこから来たのかと思っています。デスクトップやモバイルで同じ動作をしたいのであれば、もう必要ないかもしれません。 – shwarp

+0

リサイズ部分をコミットしました。私はそれを私の好みで修正しようとしていましたが、それをコメントアウトしようとしなかった...ありがとう、それは、今のところそれでした。 – snkv

答えて

0

または

は、あなたがモバイルデバイスにあるときにonClickイベントを削除し、クローズを追加することができ、この1

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
     $("p").slideToggle(); 
    }); 
    }); 
</script> 
</head> 
<body> 
<div> 
<button>Toggle slideUp() and slideDown()</button> 
</div> 

<p><a href="#">Link 1</a></p> 
<p><a href="#">Link 1</a></p> 
<p><a href="#">Link 1</a></p> 
<p><a href="#">Link 1</a></p> 

</body> 
</html> 
関連する問題