別個のnav dropsは別々のコンテンツを持っていなければならず、同じ内容を表示する必要があります

私は自分のWebサイトでnavbarに2つのドロップナビゲーションを持っています。。とありがとうございます。別個のnav dropsは別々のコンテンツを持っていなければならず、同じ内容を表示する必要があります

ドロップナビで同じコンテンツを表示しています。確認するコードスニペットは次のとおりです。ご例えば

var x = document.getElementById("myDropnav"); 
 
function w3_open() { 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
     x.className += " w3-show"; 
 
    } else { 
 
     x.className = x.className.replace(" w3-show", ""); 
 
    } 
 
} 
 
function w3_close() { 
 
    x.className = x.className.replace(" w3-show", ""); 
 
}


 

 
<!DOCTYPE html> 
 
<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<body> 
 
<ul class="w3-navbar w3-black"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="javascript:void(0)" onclick="w3_open()">Dropnav <i class="fa fa-caret-down"></i></a></li> 
 
<li><a href="javascript:void(0)" onclick="w3_open()">Dropnav1 <i class="fa fa-caret-down"></i></a></li> 
 
</ul> 
 

 
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav"> 
 
    <div class="w3-container"> 
 
    <span onclick="w3_close('dropnav')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span> 
 
    </div> 
 
    <div class="w3-row-padding w3-padding-bottom"> 
 
    <div class="w3-third"> 
 
    <h3>HTML/CSS</h3> 
 
    <a href="#">Learn </a> 
 
    <a href="#">Learn </a> 
 
    <a href="#">Learn </a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>JavaScript</h3> 
 
    <a href="#">Learn JavaScript</a> 
 
    <a href="#">Learn jQuery</a> 
 
    <a href="#">Learn AppML</a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>Graphics</h3> 
 
    <a href="#">Learn Canvas</a> 
 
    <a href="#">Learn SVG</a> 
 
    </div> 
 
    </div> 
 
    <br> 
 
</nav> 
 
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav"> 
 
    <div class="w3-container"> 
 
    <span onclick="w3_close('dropnav')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span> 
 
    </div> 
 
    <div class="w3-row-padding w3-padding-bottom"> 
 
    <div class="w3-third"> 
 
    <h3>HTML/CSS</h3> 
 
    <a href="#">Learn HTML</a> 
 
    <a href="#">Learn CSS</a> 
 
    <a href="#">Learn W3.CSS</a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>JavaScript</h3> 
 
    <a href="#">Learn JavaScript</a> 
 
    <a href="#">Learn jQuery</a> 
 
    <a href="#">Learn AppML</a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>Graphics</h3> 
 
    <a href="#">Learn Canvas</a> 
 
    <a href="#">Learn SVG</a> 
 
    </div> 
 
    </div> 
 
    <br> 
 
</nav> 
 

 
<div class="w3-container"> 
 
    <p>Click on the "Dropnav" button to toggle the dropnav menu.</p> 
 
</div>

出典

2016-09-01 Abderrazzak Benbouya

@RasmusGlenvig：なぜあなたはCSSのインクルードを削除しましたか？このように、この例はもう機能しません。 – Daniel

これは、ユーザーまたはこのサイトのWebの誰かからsuggetだったと私は再びコードを編集する方法がわからない –

次のようにコードを変更することがあります。

クリックイベントにメニューの識別子を追加します。

... 
<li><a href="javascript:void(0)" onclick="w3_close('myDropnav2');w3_open('myDropnav1');">Dropnav 1<i class="fa fa-caret-down"></i></a></li> 
<li><a href="javascript:void(0)" onclick="w3_close('myDropnav1');w3_open('myDropnav2');">Dropnav 2<i class="fa fa-caret-down"></i></a></li> 
...

メニューの識別子を一意に変更します。

... 
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav1"> 
    <div class="w3-container"> 
     <span onclick="w3_close('myDropnav1')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span> 
... 
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav2"> 
    <div class="w3-container"> 
     <span onclick="w3_close('myDropnav2')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span> 
...

現在のメニューの識別子を考慮してください。

function w3_open(id) { 
    var x = document.getElementById(id); 
    if (x.className.indexOf("w3-show") == -1) { 
     x.className += " w3-show"; 
    } else { 
     x.className = x.className.replace(" w3-show", ""); 
    } 
} 
function w3_close(id) { 
    var x = document.getElementById(id); 
    x.className = x.className.replace(" w3-show", ""); 
}

出典

2016-09-01 13:38:26 Daniel

function w3_open(identifier) { 
 
    w3_close(); 
 
    var x = document.getElementById(identifier); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
     x.className += " w3-show"; 
 
    } else { 
 
     x.className = x.className.replace(" w3-show", ""); 
 
    } 
 
} 
 
function w3_close() { 
 
    var elements = document.getElementsByClassName('dropnav-identifier'); 
 
    Array.prototype.forEach.call(elements, function(element, index) { 
 
    element.className = element.className.replace(" w3-show", ""); 
 
}); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<body> 
 
<ul class="w3-navbar w3-black"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="javascript:void(0)" onclick="w3_open('myDropnav')">Dropnav <i class="fa fa-caret-down"></i></a></li> 
 
<li><a href="javascript:void(0)" onclick="w3_open('myDropnav1')">Dropnav1 <i class="fa fa-caret-down"></i></a></li> 
 
</ul> 
 

 
<nav class="w3-dropnav w3-card-2 dropnav-identifier" style="display:none" id="myDropnav"> 
 
    <div class="w3-container"> 
 
    <span onclick="w3_close('dropnav')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span> 
 
    </div> 
 
    <div class="w3-row-padding w3-padding-bottom"> 
 
    <div class="w3-third"> 
 
    <h3>HTML/CSS</h3> 
 
    <a href="#">Learn </a> 
 
    <a href="#">Learn </a> 
 
    <a href="#">Learn </a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>JavaScript</h3> 
 
    <a href="#">Learn JavaScript</a> 
 
    <a href="#">Learn jQuery</a> 
 
    <a href="#">Learn AppML</a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>Graphics</h3> 
 
    <a href="#">Learn Canvas</a> 
 
    <a href="#">Learn SVG</a> 
 
    </div> 
 
    </div> 
 
    <br> 
 
</nav> 
 
<nav class="w3-dropnav w3-card-2 dropnav-identifier" style="display:none" id="myDropnav"> 
 
    <div class="w3-container"> 
 
    <span onclick="w3_close()" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span> 
 
    </div> 
 
    <div class="w3-row-padding w3-padding-bottom"> 
 
    <div class="w3-third"> 
 
    <h3>HTML/CSS</h3> 
 
    <a href="#">Learn HTML</a> 
 
    <a href="#">Learn CSS</a> 
 
    <a href="#">Learn W3.CSS</a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>JavaScript</h3> 
 
    <a href="#">Learn JavaScript</a> 
 
    <a href="#">Learn jQuery</a> 
 
    <a href="#">Learn AppML</a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>Graphics</h3> 
 
    <a href="#">Learn Canvas</a> 
 
    <a href="#">Learn SVG</a> 
 
    </div> 
 
    </div> 
 
    <br> 
 
</nav> 
 
    <nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav1"> 
 
    <div class="w3-container"> 
 
    <span onclick="w3_close()" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span> 
 
    </div> 
 
    <div class="w3-row-padding w3-padding-bottom"> 
 
    <div class="w3-third"> 
 
    <h3>This is nav 2</h3> 
 
    <a href="#">Learn HTML nav 2</a> 
 
    <a href="#">Learn CSS nav 2</a> 
 
    <a href="#">Learn W3.CSS nav 2</a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>JavaScript nav 2</h3> 
 
    <a href="#">Learn JavaScript nav2</a> 
 
    <a href="#">Learn jQuery nav 2</a> 
 
    <a href="#">Learn AppML nav 2</a> 
 
    </div> 
 
    <div class="w3-third"> 
 
    <h3>Graphics nav 2</h3> 
 
    <a href="#">Learn Canvas nav 2</a> 
 
    <a href="#">Learn SVG nav 2</a> 
 
    </div> 
 
    </div> 
 
    <br> 
 
</nav> 
 

 
<div class="w3-container"> 
 
    <p>Click on the "Dropnav" button to toggle the dropnav menu.</p> 
 
</div>

あなたはw3_open（）関数を呼び出している間、関連するデータを送信することにより、これを行うことができます。

出典

2016-09-01 13:47:16

あなたは私のためにそれを説明することができますか、私はそれを説明する新しい場所を行うことができますか？仕事とありがとう –

実際には、w3_open（）メソッドを呼び出すと、以前は1つのnavコンテンツのみを開くように記述されていました。私がしたのは、2つのnavコンテンツを作成してそれらを識別するために異なるidを与え、今w3_open（識別子）を呼び出す際に、どのドロップダウンボタンが押されたかを識別できる識別子を送り、したがってそのnav 。ハッピーコーディング。 :) –

別個のnav dropsは別々のコンテンツを持っていなければならず、同じ内容を表示する必要があります

答えて

関連する問題