1
現在、私はASP.NETアプリケーションのブートストラップメニューを作成中です。これを行うには、私は自分でナビゲーションバーをした、と私はボタンをクリックしたときに、それはそのようなメニューを示しています。ブートストラップ閉じるメインドロップダウンでのサブドロップダウン
私が望んでいたし、（すべてのコードは、後になります）うまくいきました。次に、2番目の選択肢（例：「Fiche」）をクリックすると表示されるサブメニューを作成します。だから、いくつかの研究の後、私はこのようなブートストラップナビゲーションバーでそれを行うことができますを見つける：
私が望んでいたほとんど何が！ （それは醜いことを除いて、それをより良く見えるようにする方法はわかりませんが、それは別の問題です。） しかし、私が望むのは、私のメニュー以外の場所をクリックすると、私は再びそれを開くためにクリックします、私は以前に開いたサブメニューを表示しません（基本的に、私はすべてを閉じたい）。
そして、この部分はうまくいきません。私はどこかをクリックしてもサブメニューを閉じることはできません。どうすればこれを正しく行うことができないのでしょうか？ .attrと手動でブートストラップ属性を削除しようとするが、それを行う良い方法ではないようだ。だから私は実際には、サブメニューの閉鎖を除いてほぼ動作するコードを投稿します（また、私はこのコミュニティには全く新しいです、私はまだ適切な投稿をする方法をテストしていますので、十分な情報を入れてください）。おそらく私の構成の違いにつながることができ、ブートストラップの湖の、動作していないよう：
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.immune-nav-close')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.well
{
background-color: #219cdc !important;
}
.top-navbar
{
\t background-color: #00448a;
\t width: 100%;
\t height: 60px;
padding-top: 15px;
}
\t \t \t \t
.menu-btn
{
\t margin-left: 2%;
\t height: 75%;
\t width: 40px;
\t max-width: 40px;
\t display: inline-block;
}
\t \t \t
.span-menu
{
\t width: 100%;
\t height: 20%;
\t margin-bottom:10%;
\t background-color: white;
\t border-radius: 5px;
}
\t \t \t
.dropdown-content
{
\t display: none;
\t position: absolute;
\t background-color: #219cdc;
\t min-width: 160px;
\t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
\t color: white;
\t border-radius: 5px;
\t top: 60px;
z-index: 1000 !important;
}
\t \t \t
.dropdown-content a
{
\t color: white;
\t padding: 12px 16px;
\t text-decoration: none;
\t display: block;
}
\t \t \t
.dropdown-content a:hover {color: black; background-color:white;}
\t \t \t
.show {display:block;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="top-navbar">
\t \t \t <a class="menu-btn immune-nav-close" href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">
\t \t \t \t <div class="span-menu immune-nav-close"></div>
\t \t \t \t <div class="span-menu immune-nav-close"></div>
\t \t \t \t <div class="span-menu immune-nav-close"></div>
\t \t \t </a>
\t \t \t <div id="myDropdown" class="dropdown-content">
\t \t \t \t <a href="/Default.aspx">Accueil</a>
\t \t \t \t <a class="immune-nav-close" data-toggle="collapse" href="#collapseFiche" aria-expanded="false" aria-controls="collapseFiche">
Fiches
</a>
<div class="collapse ddown-nav" id="collapseFiche">
<div class="well">
<a href="/SaisieFiche.aspx">Saisir une fiche</a>
<a href="/MyFiches.aspx">Mes fiches</a>
</div>
</div>
\t \t \t \t <a href="/Approbation.aspx">Approbations</a>
<a href="/Validation.aspx">Validation RH</a>
<a class="immune-nav-close" data-toggle="collapse" href="#collapseExport" aria-expanded="false" aria-controls="collapseExport">
Exportations
</a>
<div class="collapse ddown-nav" id="collapseExport">
<div class="well">
<a href="/Synthese.aspx">Synthèse</a>
<a href="/Monthly.aspx">Bilan Mensuel</a>
<a href="/Personnal.aspx">Bilan Personnel</a>
</div>
</div>
<a class="immune-nav-close" data-toggle="collapse" href="#collapseSetting" aria-expanded="false" aria-controls="collapseSetting">
Configuration
</a>
<div class="collapse ddown-nav" id="collapseSetting">
<div class="well">
<a href="/Config_pays.aspx">Paramétrage Pays</a>
<a href="/Config_csp.aspx">Paramétrage Catégories Socio-Professionnelles</a>
</div>
</div>
\t \t \t </div>
</nav>は、より多くの情報が必要とされているかどうか尋ねること自由に落ちました！あなたの助けを前にありがとう。