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。

var vector = new VectorLayer({
        source: new VectorSource({
          url: 'data/gpx/fells_loop.gpx',
          format: new GPX()
        }),
        style: function(feature) {
          return style[feature.getGeometry().getType()];
        }
      });

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>

当我使用jQuery单击另一个下拉菜单按钮时，如何关闭活动的下拉菜单？

2 个答案: