1つのコンテナに複数のドロップダウンがあり、お互いに干渉することなく

Question

ナビゲーションバーにドロップダウンを作成しました。そのうちの1つを持っているとうまくいきますが、複数のドロップダウンがある場合は意図どおりに動作します。それらの両方ががクリックされていない他のものを閉じずを開く、私は最初のドロップダウンをクリックすると、それが表示されますが、それが開かれた後、私はまた、二のドロップダウンをクリックした場合このような機能を実装するにはどうしたらいいですか？

ここに私の現在のコードです：

HTML：

<nav class="navbar"> 
    <ul class="navbar-links"> 
     <li class="navbar-link"><a href="#">Home</a></li> 
     <li class="navbar-link"><a href="#">About</a></li> 
     <li class="navbar-link dropdown"> 
      <a href="#"> 
      Projects 
      <i class="fa fa-caret-down" aria-hidden="true"></i> 
      </a> 
      <div class="dropdown-content"> 
       <a href="#">Shanary</a> 
       <a href="#">Physics Solver</a> 
       <a href="#">A simple blog</a> 
      </div> 
     </li> 
     <li class="navbar-link dropdown"> 
      <a href="#"> 
      Projects 
      <i class="fa fa-caret-down" aria-hidden="true"></i> 
      </a> 
      <div class="dropdown-content"> 
       <a href="#">Something else</a> 
       <a href="#">Text Editor</a> 
       <a href="#">A social Network</a> 
      </div> 
     </li> 
    </ul> 
</nav> 

はCSS：

.navbar { 
    background-color: #3A506B; 
    border-bottom: 1px solid #cccccc; 
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); 
} 
.navbar-links { 
    margin: 0; 
    font-size: 16px; 
    list-style-type: none; 
} 
.navbar-link, 
.dropdown-content a { 
    display: inline-block; 
    padding: 20px 0px; 
    transition: background 0.1s ease-in-out; 
} 
.navbar-link:hover, 
.dropdown-content a:hover { 
    background: #3f5775; 
} 
.navbar-link a { 
    padding: 20px 10px; 
    color: #5DD39E; 
    text-decoration: none; 
} 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 
.dropdown-content { 
    display: none; 
    position: absolute; 
    top: 100%; 
    min-width: 160px; 
    padding: 10px; 
    z-index: 1; 
    background-color: #3A506B; 
} 
.dropdown-content a { 
    display: block; 
} 
body { 
    font-family: 'Open Sans', Arial, sans-serif; 
    background: #FFFFFF; 
    color: #16302B; 
    margin: 0px; 
} 
.visible { 
    display: block; 
} 

とこれまでのところ、これは私のJavaScriptファイルです：

$('.dropdown').click(function() { 
    $(this).find('.dropdown-content').toggleClass('visible'); 
}); 

また、ここだが、 JSFiddle。

問題は、それらの両方他の1を閉じずに開いているが、ここで何が起こっているかのイメージだ、ということです。

Answer 1

あなたがするかどうかを決定するためにすべてのターゲットをループしています彼らは現在のターゲットかではなく、

$('.dropdown').click(function(e) { 
 
    $(this).find('.dropdown-content').toggleClass('visible'); 
 
    var that = this; 
 
    $('.dropdown').each(function() { 
 
    if (that != this) { 
 
     $(this).find('.dropdown-content').removeClass('visible'); 
 
    } 
 
    }) 
 
});

.navbar { 
 
    background-color: #3A506B; 
 
    border-bottom: 1px solid #cccccc; 
 
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.navbar-links { 
 
    margin: 0; 
 
    font-size: 16px; 
 
    list-style-type: none; 
 
} 
 

 
.navbar-link, 
 
.dropdown-content a { 
 
    display: inline-block; 
 
    padding: 20px 0px; 
 
    transition: background 0.1s ease-in-out; 
 
} 
 

 
.navbar-link:hover, 
 
.dropdown-content a:hover { 
 
    background: #3f5775; 
 
} 
 

 
.navbar-link a { 
 
    padding: 20px 10px; 
 
    color: #5DD39E; 
 
    text-decoration: none; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    min-width: 160px; 
 
    padding: 10px; 
 
    z-index: 1; 
 
    background-color: #3A506B; 
 
} 
 

 
.dropdown-content a { 
 
    display: block; 
 
} 
 

 
body { 
 
    font-family: 'Open Sans', Arial, sans-serif; 
 
    background: #FFFFFF; 
 
    color: #16302B; 
 
    margin: 0px; 
 
} 
 

 
.visible { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar"> 
 
    <ul class="navbar-links"> 
 
    <li class="navbar-link"><a href="#">Home</a></li> 
 
    <li class="navbar-link"><a href="#">About</a></li> 
 
    <li class="navbar-link dropdown"> 
 
     <a href="#"> 
 
      Projects 
 
      <i class="fa fa-caret-down" aria-hidden="true"></i> 
 
      </a> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Shanary</a> 
 
     <a href="#">Physics Solver</a> 
 
     <a href="#">A simple blog</a> 
 
     </div> 
 
    </li> 
 
    <li class="navbar-link dropdown"> 
 
     <a href="#"> 
 
      Projects 
 
      <i class="fa fa-caret-down" aria-hidden="true"></i> 
 
      </a> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Something else</a> 
 
     <a href="#">Text Editor</a> 
 
     <a href="#">A social Network</a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</nav>

の下に、視認性

参照スニペットを削除します