ブートストラップ3対応ドロップダウン・ホバー・メニューがモバイルで動作しない

Question

ドロップダウン・サブメニュー項目を含む応答メニューを作成したいと考えています。これまでのところデスクトップ上で作業していますが、モバイルでは動作しません（私はiPhone 5でテスト中）。ここで

は私のコードです：

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand page-scroll" href="#page-top" style="padding-top: 0px !important"> 

     </a> 
    </div> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu1</a> 
     <ul class="dropdown-menu"> 
     <li> 
      <a href="#">Submenu1</a> 
     </li> 
     <li> 
      <a href="#">Submenu2</a> 
     </li> 
     <li> 
      <a href="#">Submenu3</a> 
     </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Menu2</a> 
    </li> 
    <li> 
     <a href="#">Menu3</a> 
    </li> 
    <li> 
     <a href="#">Menu4</a> 
    </li> 
    <li> 
     <a href="#">Menu5</a> 
    </li> 
    </ul> 
</div> 

私は2つの方法で問題を解決しようとした：

1.私はjqueryのを追加しようとしました（しかし、私私は十分なコードを書くだけでは十分ではないと気づいた） - 私は "listenWidth（）"を使用していたはずであることも読んだが、実際にどのようにすればよいか分からない。

function dropdown() { 
    if ($(window).width() >= 780) { 
    jQuery('ul.nav li.dropdown').hover(function() { 
     jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(); 
    }, function() { 
     jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(); 
    }); 
} 
} 

// Execute on load 
dropdown(); 
// Bind event listener 
$(window).resize(dropdown); 

2.私は隠された-XS、可視XSでそれを実行しようとしましたが、それは同様に動作しませんでした。

私を助けてください！

おかげで、 F

Answer 1

あなたのコードは大丈夫に見えます。 bootsrtap JSの前にjQueryライブラリが追加されているかどうか確認してください。

私は、次を追加し、私は、xs幅にブラウザのサイズを変更すると、あなたのコードは動作します：

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 

http://codepen.io/pavithraolety/pen/vKbGXL/

あなたのjqueryのスニペットが必要とされていません。ドロップダウンブートストラップを開くには

Answer 2

が正しく、あなたがそれを削除/追加する必要があり、それを開くために、

ので

<li class="dropdown"> 

に「開く」クラスを追加します。

$('a.dropdown-toggle').hover(function(e) { 
    $('li.dropdown').toggleClass('open'); 
}) 

次のステップは、親へのクラスtogglignを適用することです。

$('a.dropdown-toggle').hover(function(e) { 
    $(e.currentTarget).parent().toggleClass('open'); 
}) 

このハンドラはタッチスクリーン上で実行しないでください。モバイルデバイスはTV +マウスで接続できることに注意してください。それはチェックして、取り扱いが困難ですが、あなたはそれを気にしない場合は、ちょうどあなたが携帯電話の画面サイズとテストにあなたのデスクトップブラウザのサイズを変更する