基本的な考え方は、それぞれを切り替える (表示/非表示) ことができる div がたくさんあるということです。
1 つの div が切り替えられると、現在表示されている他の div を非表示にしたいので、一度に 1 つの div のみを表示できるようにします。
さらに、要素の外側をクリックして、開いている div も非表示にできるようにしたいと考えています。
物事を明確にするために、別のdivを開くときにdivを閉じることを除いて、現在必要なすべてを実行する例を提供しました(一度に1つのdivのみを開く機能):
$(document).ready(function(){
$('div.dropdown').each(function() {
var $dropdown = $(this);
$("a.dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$("div.dropdown-container", $dropdown).toggle();
return false;
});
});
$('html').click(function(){
$("div.dropdown-container").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>