ブートストラップドロップダウントグル点滅エラー

ナビゲーションバーにドロップダウンがある、あらかじめ組み立てられたファイルを作成しています。クライアントはマウスオーバーでドロップダウンを開くことを望みます。だから、いくつかのjQueryを追加して、 'open'（ドロップダウンがクリックされたときのブートストラップのように）というクラスを追加しました。ブートストラップドロップダウントグル点滅エラー

これは機能しましたが、新しい問題が発生しました。ドロップダウンの選択肢の1つをクリックすると、ドロップダウンが一度点滅してから、私の選択したバスに私を連れて行きます。

私はこれを調べて、この「フラッシュ」の原因を特定できません。これは私が約束を示したことがわかった唯一の記事でした：Twitter bootstrap stop propagation on dropdown open

どんな助けがGREAT！

私はこのJSFiddleでこの問題を再現しようとしましたが、私は 'フラッシュ'を取得しません。ここで

が私のHTMLコードがある...

<div class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid "> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Toggle</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="STUFF.cfm?page=home"> 
 
     STUFF AND MORE STUFF 
 
     </a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="dropdown"> 
 
      <a href="##" class="dropdown-toggle" data-toggle="dropdown" id="nav-dropdown-toggle">FULL NAME STUFF <span class="caret"></span></a> 
 
      <ul class="dropdown-menu dropdown-menu-css" role="menu"> 
 
       <li><a href="STUFF.cfm?page=home">Home Page</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 1</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 2</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 3</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 4</a></li>    
 
       <li class="divider"></li> 
 
       <li><a id="logout-li" href="##" name="btn-logout">Logout</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
    </div> \t <!--/.nav-collapse --> 
 
    </div> \t <!--/.container-fluid --> 
 
</div>

ここでは私たちの基本言語は、ColdFusionであることに留意すべきであるJS

(function(){ 
 
    
 
    $("ul.nav.navbar-nav.navbar-right").hover(function(){ 
 

 
    $("li.dropdown").toggleClass('open'); 
 
    }) 
 
})()

です。皆さん、ありがとうございました！

出典

2017-02-15 davidhartman00

私のスクリプトは 'open'というクラスを頻繁に切り替えることで、「点滅」効果を引き起こしていました。

$("ul.nav.navbar-nav.navbar-right").mouseenter(function(){ 
 
     if(!$("li.dropdown").hasClass("open")){ 
 
      $("li.dropdown").toggleClass('open'); 
 
     } 
 
     }) 
 
     .mouseleave(function(){ 
 
     if($("li.dropdown").hasClass("open")){ 
 
      $("li.dropdown").toggleClass('open'); 
 
      } 
 
     })

：「オープン」クラスがすでに存在していた場合は、最初のチェックを次のようにする代わりに、私は私のJSを書き直し

出典

2017-02-16 17:44:09 davidhartman00

私はあなたが注意

/* Change color of dropdown links on hover */ 
 
.dropdown-menu a:hover {background-color: #f1f1f1} 
 

 
/* Show the dropdown menu on hover */ 
 
.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
} 
 

 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus { 
 
\t background-image: none; 
 
\t background-color: #9fdfbf; 
 
}

<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      
 
    
 
</head> 
 
<div class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid "> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Toggle</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="STUFF.cfm?page=home"> 
 
     STUFF AND MORE STUFF 
 
     </a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="dropdown"> 
 
      <a href="##" class="dropdown-toggle" data-toggle="dropdown" id="nav-dropdown-toggle">FULL NAME STUFF <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li><a href="STUFF.cfm?page=home">Home Page</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 1</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 2</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 3</a></li> 
 
       <li><a href="STUFF.cfm?page=home">STUFF 4</a></li>    
 
       <li class="divider"></li> 
 
       <li><a id="logout-li" href="##" name="btn-logout">Logout</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
    </div> \t <!--/.nav-collapse --> 
 
    </div> \t <!--/.container-fluid --> 
 
</div>

をwant--ものを達成するために、この単純なCSSを使用するためにあなたをお勧めします：私の答えは、小さな画面サイズにいくつかの問題を抱えているようです。それを修正しようとしている！

希望すると便利です。

出典

2017-02-15 00:50:26 neophyte

ブートストラップドロップダウントグル点滅エラー

答えて

関連する問題