ブートストラップのJavaScriptのドロップダウンメニュー - データ振る舞い

ブートストラップのサイトは、データの属性やJavaScriptで、ブートストラップのJavaScriptのドロップダウンメニュー - データ振る舞い

を教えて属性、ドロップダウンプラグインは親リスト項目に.openクラスをトグルすることによって隠されたコンテンツ（ドロップダウンメニュー）を切り替えます。
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.myDropdownHandle').dropdown('toggle'); 
}); 
私はこのコードのブロックがにあるドロップダウンのために必要であろうという印象の下にあった：「JavaScriptを経由して、」次のスクリプトがあると考えられている次のコードでは、

私は "Javascript経由で"トグルしたい場合は動作しますが、そのブロックを消去することはできますが、ドロップダウンはデータ属性でも機能しますが、データ属性を消去するとドロップダウンがまったく機能しません。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script type='text/javascript' 
    src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.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> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.myDropdownHandle').dropdown('toggle'); 
}); 
</script> 
</head> 
    <body style='margin:30px'> 
    <div class="dropdown" id="myDropdown"> 
     <a class="myDropdownHandle" data-toggle="dropdown" data-target="#" href="#"> 
      Dropdown <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
     </ul> 
    </div> 

    </body> 
</html>

出典

2017-06-12 Diego Burela

あなたの質問は何ですか？参照したとおり、jsコールまたはデータ属性を使用してドロップダウンを初期化できます。コード例を明確にしてください – lordrhodos

のようにページのロード時に、あなたのドロップダウンリストは、表示されるだろうように、このjQueryのコードはそれを作るだろう、ドロップダウンリストの内容が表示されます。

$(document).ready(function(){ 
    $('.myDropdownHandle').dropdown('toggle'); 
});

したがって、ページの読み込み時にドロップダウンを切り替えたくない場合は、このコードを削除してください。ただし、データ属性を削除すると、ドロップダウンリストは1つとして動作しません。

これを参照すると、W3School Linkがさらに明確になります。 Hereは、実際のドロップダウントグルを示す例です。

出典

2017-06-12 21:56:03

ブートストラップを使用しているときにドロップダウンをトリガするために直接javascriptする必要はありませんか？これは役に立ちました。私はそのコードがアンカーがクリックされたときにドロップダウンをトリガーすることを意図していたという印象を受けました。 –

ドロップダウンの開始または終了をトリガーしたい他の要素がない限り、このコードは無視できます。私はこのコードがブートストラップAPIを使用してドロップダウンを手動で開閉する方法を明らかにする例であると仮定しています。 –

あなたはhere

かかわらず、あなたはJavaScriptを経由して、あなたのドロップダウンを呼び出すか、代わりにデータ-API、データトグル=「ドロップダウン」を使用するかどうかのセクションの下部を読めば、常に上に存在であることが要求されますドロップダウンのトリガー要素

出典

2017-06-12 21:57:22 alexhuang

この行はすべて、自動的にメニューを開くかどうかを決定します。

$(document).ready(function() { 
     $('.dropdown-menu').dropdown('toggle'); 

<div class="dropdown"> 
    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     Dropdown trigger 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dLabel"> 
     <ul>

出典

2017-06-12 22:56:34 kblau

@Diego Burela Govindと私はどちらも自分の仕事をしてあなたの質問に答えました。両方をupvoteしてください、他の人が彼らの質問に答えるでしょう – kblau

ブートストラップのJavaScriptのドロップダウンメニュー - データ振る舞い

答えて

関連する問題