ブートストラップのナビゲーションバーのドロップダウンは、一度クリックするとアクティブになります

navbarボタンのホバードロップダウンエフェクトは、navbarボタンの1つがクリックされると有効になります。その後、もう一度ボディーホバーのように外にクリックして無効にする必要があります。現時点ではホバーが動作しています。マウスを動かすと有効になります（ホバー効果）ので、ユーザーがナビバーを使用しない場合は迷惑になることがあります。ブートストラップのナビゲーションバーのドロップダウンは、一度クリックするとアクティブになります

通常、ナビゲーションバーをホバーしているとき、ボタンはリストをドロップダウンしてはなりません。しかし、いったんnavbarボタンのいずれかがクリックされると、あなたが側面をクリックするまで、ボディのようにすべてのnavbarボタンが通常のようにホバリングするはずです。私はいくつかのjQueryを試しましたが、成功しませんでした。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>BAPTIST</title> 
 
    <meta charset="UTF-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <link rel="stylesheet" href="./headerAndFooter.css" /> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 

 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav top-nav pull-right"> 
 
      <div class="dropdown"> 
 
      <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</a></li> 
 
      <div class="dropdown-content"> 
 
       <a href="#">Action</a> 
 
       <a href="#">Another action</a> 
 
       <a href="#">Something else here</a> 
 
       <a href="#">Separated link</a> 
 
       <a href="#">One more separated link</a> 
 
      </div> 
 
      </div> 
 

 
      <div class="dropdown"> 
 
      <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</a></li> 
 
      <div class="dropdown-content"> 
 
       <a href="#">Action</a> 
 
       <a href="#">Another action</a> 
 
       <a href="#">Something else here</a> 
 
       <a href="#">Separated link</a> 
 
       <a href="#">One more separated link</a> 
 
      </div> 
 
      </div> 
 

 
      <div class="dropdown"> 
 
      <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</a></li> 
 
      <div class="dropdown-content"> 
 
       <a href="#">Action</a> 
 
       <a href="#">Another action</a> 
 
       <a href="#">Something else here</a> 
 
       <a href="#">Separated link</a> 
 
       <a href="#">One more separated link</a> 
 
      </div> 
 
      </div> 
 

 
      <div class="dropdown"> 
 
      <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</a></li> 
 
      <div class="dropdown-content"> 
 
       <a href="#">Action</a> 
 
       <a href="#">Another action</a> 
 
       <a href="#">Something else here</a> 
 
       <a href="#">Separated link</a> 
 
       <a href="#">One more separated link</a> 
 
      </div> 
 
      </div> 
 

 

 
      <div class="dropdown"> 
 
      <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</a></li> 
 
      <div class="dropdown-content"> 
 
       <a href="#">Action</a> 
 
       <a href="#">Another action</a> 
 
       <a href="#">Something else here</a> 
 
       <a href="#">Separated link</a> 
 
       <a href="#">One more separated link</a> 
 
      </div> 
 
      </div> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</body> 
 

 
</html>

出典

2017-08-22 Anu Rajan

あなたはjsfiddleでそれを持っていますか？ –

私はあなたのナビゲーションバーは、あなたが持っているすべてのCSSなしで動作するようになってとのトラブルを抱えていたので、私はあなたを表示するには、サイトからの一般的なブートストラップ3ナビゲーションバーを使用していました。

何以下のコードがすることはこれです：

いつでもナビゲーション内部リンクタグをクリックすると、それがtrueに変数allowHoverを設定します。
ユーザーのマウスが「コンテンツ」のクラスを持つdivに入るたびに、allowHoverはfalseに設定されます。

他の2つの機能は自明ですが、説明が必要な場合はお知らせください。

let allowHover = false 

$('nav a').click(function() { 
    allowHover = true 
}) 

$('.content').mouseenter(function() { 
    allowHover = false 
}) 

$('ul.nav .dropdown').hover(function() { 
    if(allowHover) 
     $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn('fast'); 
}) 

$('ul.nav .dropdown').mouseleave(function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut('fast'); 
})

codepenを参照してください。ナビゲーション内の通常のリンクをクリックしたとき、マウスをナビゲーションバーの外に移動しないとき、またはドロップダウンが機能しないことを確認します。

これはあなたが尋ねたものの例ですが、自分の演奏を得るために必要な場所を得るには十分だと思います。

出典

2017-08-22 19:53:43

ブートストラップのナビゲーションバーのドロップダウンは、一度クリックするとアクティブになります

答えて

関連する問題