javascript - 如何通过 jquery 反转对兄弟元素的操作

Question

我想使用 Jquery 创建一个带有子菜单的菜单栏。有两个带有子菜单的元素。当我单击一次时，我希望它向下滑动，当我单击第二个时，第二个需要向下滑动，但第一个或所有另一个需要向上滑动。我试过以下:

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
    <ul>
        <li class="lang">
            <a href="">ENG <i class="fa fa-caret-down" aria-hidden="true"></i></a>
            <ul>
                <li><a href="#">En</a></li>
                <li><a href="#">Bn</a></li>
            </ul>
        </li>
        <li class="lang">
            <a href="">USD <i class="fa fa-caret-down" aria-hidden="true"></i></a>
            <ul>
                <li><a href="#">USD</a></li>
                <li><a href="#">VND</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

        .footer-lang ul{
         display: block;
         text-align: center;
        }
        .footer-lang .lang{
         display: inline-block;
        }
        .footer-lang .lang a{
         display: block;
         padding: 8px;
         color: #000;
        }
        .footer-lang .lang > ul{
         display: none;
         position: absolute;
        }

Javascript

    $(document).ready(function(){
     $('.footer-lang .lang a').on('click', function(e) {

      $(this).next('ul').slideToggle('slow');
      e.preventDefault();

     });
    });

Answer 1

点击将其他子菜单设置为 slideUp fast 或 slow 并切换到下面的代码段以获取更多信息

$(document).ready(function(){
     $('.footer-lang .lang a').on('click', function(e) {
      $(".lang > ul").slideUp("fast");
      $(this).next('ul').slideToggle('slow');
      e.preventDefault();

     });
    });

.footer-lang ul{
         display: block;
         text-align: center;
        }
        .footer-lang .lang{
         display: inline-block;
        }
        .footer-lang .lang a{
         display: block;
         padding: 8px;
         color: #000;
        }
        .footer-lang .lang > ul{
         display: none;
         position: absolute;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
    <ul>
        <li class="lang">
            <a href="">ENG <i class="fa fa-caret-down" aria-hidden="true"></i></a>
            <ul>
                <li><a href="#">En</a></li>
                <li><a href="#">Bn</a></li>
            </ul>
        </li>
        <li class="lang">
            <a href="">USD <i class="fa fa-caret-down" aria-hidden="true"></i></a>
            <ul>
                <li><a href="#">USD</a></li>
                <li><a href="#">VND</a></li>
            </ul>
        </li>
    </ul>
</div>