JQuery выпадающее меню показать/скрыть несколько

Question

Я просматривал много вопросов/ответов, но до сих пор не смог решить мою проблему. Итак, у меня есть меню с раскрывающимся списком JS (при нажатии, а не наведении), но если я открою раскрывающийся список, и я нажму на второе меню, откроется другое раскрывающееся меню, но предыдущее не будет закрыто.

Щелчок за пределами меню закрывает выпадающее меню, что отлично, но этого недостаточно, я хочу, чтобы первое выпадающее меню было закрыто даже при нажатии на второй!

<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"); 
}