當我使用jQuery單擊另一個下拉菜單按鈕時，如何關閉活動的下拉菜單？

Question

我想在單擊另一個菜單按鈕以打開其特定的下拉菜單時關閉已經打開的下拉菜單。

我發現了如何使用香草JS（而不是jQuery）來做到這一點。

<li>
    <div class="menu-list-container">
        <a href="#">Dropdown Menu 1</a>
        <div class="dropdownmenu1-button">
           <img src="#">
        </div>
    </div>
    <ul class="dropdown-menu1">
        <li><a href="#">li 1</a></li>
        <li><a href="#">li 2</a></li>
        <li><a href="#">li 3</a></li>
        <li><a href="#">li 4</a></li>
        <li><a href="#">li 5</a></li>
    </ul>
</li>
<li>
    <div class="menu-list-container">
        <a href="#">Dropdown Menu 2</a>
        <div class="dropdownmenu2-button">
           <img src="#">
        </div>
    </div>
    <ul class="dropdown-menu2">
        <li><a href="#">li 1</a></li>
        <li><a href="#">li 2</a></li>
        <li><a href="#">li 3</a></li>
        <li><a href="#">li 4</a></li>
        <li><a href="#">li 5</a></li>
    </ul>
</li>
<li>
    <div class="menu-list-container">
        <a href="#">Dropdown Menu 3</a>
        <div class="dropdownmenu3-button">
           <img src="#">
        </div>
    </div>
    <ul class="dropdown-menu3">
        <li><a href="#">li 1</a></li>
        <li><a href="#">li 2</a></li>
        <li><a href="#">li 3</a></li>
        <li><a href="#">li 4</a></li>
        <li><a href="#">li 5</a></li>
    </ul>
</li>

<script>
    $('.dropdownmenu1-button').click(function() {
       $('.dropdown-menu1').toggle();
    });
    $('.dropdownmenu2-button').click(function() {
       $('.dropdown-menu2').toggle();
    });    
    $('.dropdownmenu3-button').click(function() {
       $('.dropdown-menu3').toggle();
    });
</script>

當使用jQuery單擊任何下拉菜單按鈕時，我需要找到一種關閉dropdown-menu1 ， dropdown-menu2和dropdown-menu3方法。 任何幫助將不勝感激。

Answer 1

嘗試為每個ul添加一個類似drop-menu的類，如下面的示例，在單擊所有ul之后，將關閉並打開目標ul。

 <ul class="dropdown-menu1 drop-menu"></ul> <ul class="dropdown-menu2 drop-menu"></ul> <ul class="dropdown-menu3 drop-menu"></ul> <script> $('.dropdownmenu1-button').click(function() { $('.drop-menu').toggle(); $('.dropdown-menu1').toggle(); }); $('.dropdownmenu2-button').click(function() { $('.drop-menu').toggle(); $('.dropdown-menu2').toggle(); }); $('.dropdownmenu3-button').click(function() { $('.drop-menu').toggle(); $('.dropdown-menu3').toggle(); }); </script> 

Answer 2

<li>
    <div class="menu-list-container">
        <a href="#">Dropdown Menu 1</a>
        <div class="dropdownmenu1-button">
           <img src="#">
        </div>
    </div>
    <ul class="dropdown-menu1 dropdownShareClasName">
        <li><a href="#">li 1</a></li>
        <li><a href="#">li 2</a></li>
        <li><a href="#">li 3</a></li>
        <li><a href="#">li 4</a></li>
        <li><a href="#">li 5</a></li>
    </ul>
</li>
<li>
    <div class="menu-list-container">
        <a href="#">Dropdown Menu 2</a>
        <div class="dropdownmenu2-button">
           <img src="#">
        </div>
    </div>
    <ul class="dropdown-menu2 dropdownShareClasName">
        <li><a href="#">li 1</a></li>
        <li><a href="#">li 2</a></li>
        <li><a href="#">li 3</a></li>
        <li><a href="#">li 4</a></li>
        <li><a href="#">li 5</a></li>
    </ul>
</li>
<li>
    <div class="menu-list-container">
        <a href="#">Dropdown Menu 3</a>
        <div class="dropdownmenu3-button">
           <img src="#">
        </div>
    </div>
    <ul class="dropdown-menu3 dropdownShareClasName">
        <li><a href="#">li 1</a></li>
        <li><a href="#">li 2</a></li>
        <li><a href="#">li 3</a></li>
        <li><a href="#">li 4</a></li>
        <li><a href="#">li 5</a></li>
    </ul>
</li>

<script>
    $('.dropdownShareClasName').click(function() {
       $('.dropdownShareClasName').slideUp(); // close dropdown function
       $(this).slideDown(); // open dropdown function
    });
</script>