ナビゲーションバーのトグルドロップダウンは、携帯電話では反応しません。

ウィンドウの幅を小さくしてアクティブにすると、navbarのトグルボタンがコンピュータのセクションを表示するように表示されますが、私の携帯電話でWebサイトにアクセスすると、ボタンは画像のように動作し、ドロップダウンしません。これは、ボタンがタッチレスポンスではないためだと思います。どうすれば効率的に携帯電話のボタンにすることができますか？ここでナビゲーションバーのトグルドロップダウンは、携帯電話では反応しません。

は、これまでの私のコードです：

EDIT：要求ごとに、私はより多くのコードを追加しています。これは、HTML HEADセクションです：

<head> 
    <title>****</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" href="/assets/images/logo.png" type="image/x-icon"> 

    <!--fontawesome, bootstrap, jquery--> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> 
    <!--/fontawesome, bootstrap, jquery--> 

    <script src="/assets/smooth-scroll.min.js"></script> 
    <link href="/assets/stylesheet.css" rel="stylesheet"> 
</head>

HTML

<div class="container-fluid"> 
     <nav class="row navbar"> 
     <div class="navbar-header"> 
      <a class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i class="fa fa-lg fa-bars"></i> 
      <a class="navbar-brand" href="/"><img src="/assets/images/logo.png" width="40" height="40" class="d-inline-block align-top" alt=""> ******</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a data-scroll class="nav-item nav-link" href="#about">About</a></li> 
      <li><a data-scroll class="nav-item nav-link" href="#getinvolved">Get Involved</a></li> 
      <li><a data-scroll class="nav-item nav-link" href="#contact">Contact Us</a></li> 
      </ul> 
     </div> 
     </nav> 
    </div>

CSS

.navbar { 
    padding: 10px 0px; 
} 

.navbar-toggle { 
    border: 1px solid #000; 
    padding: 11px 10px; 
    border-radius: 2px; 
} 

.navbar-brand { 
    font-size: 22px; 
    padding: 10px 15px; 
    color: #000; 
} 

.navbar-brand:hover, .navbar-brand:focus, .navbar-brand:active { 
    color: #000; 
} 

.navbar-brand img{ 
    margin: 0px 10px 0px 0px 
} 

#navbar a, #navbar a:hover, #navbar a:focus, #navbar a:active { 
    text-decoration: none; 
    color: #000; 
    cursor: default; 

}

出典

2017-09-08 Daniel

ブートストラップまたは他のコードを使用していますか？ – mlegg

はい、私はブートストラップとsmoothscroll.jsを使用しています – Daniel

タグの前にフッターの下にすべてのjqueryコードがありますか？ https://getbootstrap.com/docs/4.0/getting-started/introduction/ – mlegg

あなたはjQueryを含む逃したことがありますか？あなたのコードは私のために働いています、ここには fiddleです。

<div class="container-fluid"> 
    <nav class="row navbar"> 
    <div class="navbar-header"> 
     <a class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">uuuuu<i class="fa fa-lg fa-bars"></i> 
     <a class="navbar-brand" href="#"><img src="" width="40" height="40" class="d-inline-block align-top" alt=""> ******</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a data-scroll class="nav-item nav-link" href="#about">About</a></li> 
     <li><a data-scroll class="nav-item nav-link" href="#getinvolved">Get Involved</a></li> 
     <li><a data-scroll class="nav-item nav-link" href="#contact">Contact Us</a></li> 
     </ul> 
    </div> 
    </nav>

だけでなく、モバイルでの私のために動作します。もっとコードを投稿してください。

出典

2017-09-08 17:22:48 DileepNimantha

はい、ウィンドウの幅にかかわらずコンピュータ上で動作しますが、携帯電話に乗ると、ウェブサイト上でボタンは画像のように動作します。私が言っていることを理解するには、携帯電話であなたのフィドルにアクセスしてください。ボタンは画像のように動作し、タッチするとドロップダウンしません。 – Daniel

これは非常にイライラしています。私は2つの他の携帯電話に行きました、そしてその両方で、ボタンはサファリとクロムの上に落ちませんでした。私は私の質問に頭の部分を追加しました。これまでのご協力ありがとうございます。 – Daniel

ナビゲーションバーのトグルドロップダウンは、携帯電話では反応しません。

答えて

関連する問題