Jqueryドロップダウンメニュー複数表示/非表示

Question

私は多くの質問/回答を見てきましたが、まだ私の問題を解決できませんでした。 私はJSドロップダウンメニューを持っています（ホバーではなくクリック）。しかし、ドロップダウンを開いて2番目のメニューをクリックすると、別のドロップダウンが開きますが、前のドロップダウンは閉じません。

メニューの外側をクリックすると、ドロップダウンが閉じられますが、十分ではありません。2番目のメニューをクリックしても最初のドロップダウンを終了します。ここで

<li><a onclick="myFunction_tools()" class="dropmenu" href="#">Tools</a></li> 
<div id="myToolsDropdown" class="down"> 
    <div> 
     Content here... 
    </div> 
</div> 
<li><a onclick="myFunction_forum()" class="dropmenu" href="#">Forum</a></li> 
<div id="myForumDropdown" class="down"> 
    <div> 
     Content here... 
    </div> 
</div> 

はJSです：

function myFunction_tools() { 
    document.getElementById("myToolsDropdown").classList.toggle("show"); 
} 

function myFunction_forum() { 
    document.getElementById("myForumDropdown").classList.toggle("show"); 
} 

window.onclick = function(event) { 
    if (!event.target.matches('.dropmenu')) { 

    var dropdowns = document.getElementsByClassName("down"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 

$(".down").click(function(e){ 
    e.stopPropagation(); 
}); 

Answer 1

EDIT 2：

ここではあなたのために働く必要があるソリューションです：

$(document).ready(function() { 
 
\t $('.dropmenu').click(function(e) { 
 
    \t e.preventDefault(); 
 
    $('.down').hide(); 
 
    $(e.target).next('.down').show(); 
 
    }); 
 
});

.down { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<li><a class="dropmenu" href="#">Tools</a> 
 
<div id="myToolsDropdown" class="down"> 
 
    <div> 
 
     Content here... 
 
    </div> 
 
</div></li> 
 
<li><a class="dropmenu" href="#">Forum</a> 
 
<div id="myForumDropdown" class="down"> 
 
    <div> 
 
     Content here... 
 
    </div> 
 
</div></li>

オリジナル：

ドロップダウンをクリックするとあなたは、すべてのドロップダウンの閉鎖を防ぐ：

場合（event.target.matches（ 'dropmenu。'）！）あなたがしなければならない

条件を変更すると、現在アクティブなドロップダウンにのみ一致します。 「if the event target matches the current active dropdown, prevent action」のように。 openクラスをチェックすることで、現在アクティブなドロップダウンを判断できます。

EDIT：あなただけに条件を変更する必要があるかもしれません：

if (!event.target.matches('.dropmenu.active')) 

ので、それは.dropmenu.activeにないクリック上のすべてのドロップダウンを閉じて、よりがダウンして上のクリックをトリガします。

とにかくjQueryのを使用しているように見えるので、また、あなたのスクリプト全体のjQueryを使用して、コードに多くを最適化できます。

$(window).click(fucntion(event) { 
    var $target = $(event.target); 
    if(!$target.hasClass('show')){ 
     $('.down').removeClass('show'); 
     $target.addClass('show'); 
    } 
}); 

Answer 2

ちょうどあなたの機能に、以前のドロップダウンのショーのクラスを削除します。例：

function myFunction_tools() { 
    document.getElementById("myToolsDropdown").classList.toggle("show"); 
    document.getElementById("myForumDropdown").classList.remove("show"); 
}