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，然后切换下面的代码段以获取更多信息

＆＃13;

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

＆＃13;

.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;
        }

＆＃13;

<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>

＆＃13;

Answer 2

一种方法是在单击时添加一个表示打开的类，然后在打开另一个项之前关闭该类。像这样的东西会使用：

$(document).ready(function() {

 $('.footer-lang .lang a').on('click', function(e) {
  e.preventDefault();

  // close the open
  $('.is-open').removeClass('is-open').slideToggle('slow);

  // open the closed
  $(this).next('ul').slideToggle('slow');
  $(this).addClass('is-open');
 });
});

如何通过jquery转换对兄弟元素的操作

2 个答案: