javascript – Slidetoggle有多个div

2023年4月7日 239次阅读

我正在努力复制这里看到的效果：
https://tu-dresden.de/if你点击语言,搜索,内部和蓝色标题中的导航.

我设法创建了这个：https://jsfiddle.net/06tfufo6/2/
我想在点击时保持slideToggle效果,并以某种方式slideToggle内部的每个元素.

单击相同/活动按钮后,它应该全部关闭.我似乎无法理解如何做到这一点.

谢谢

jQuery('.container-box, .slideout-container').hide();
jQuery('.btn-group a').on('click', function() {

  var target = "#" + jQuery(this).data("target");

  jQuery('.slideout-container').slideToggle();
  jQuery('.container-box').not(target).hide().attr('aria-expanded', 'false');
  jQuery(target).show().attr('aria-expanded', 'true');


});
.btn-group {
  background-color: #002557;
}

a {
  color: #fff;
  padding: 10px 20px;
}

.slideout-container {
  padding: 25px 0;
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
  <a href="#" class="btn blue" data-target="language" aria-expanded="false">Show language</a>
  <a href="#" class="btn blue" data-target="top_search" aria-expanded="false">Show search</a>
  <a href="#" class="btn blue" data-target="navigation" aria-expanded="false">Search navigation</a>
</div>

<div class="slideout-container">
  <section id="top_search" class="container-box" aria-expanded="false">
    Section search
  </section>

  <section id="language" class="container-box" aria-expanded="false">
    Section language
  </section>

  <section id="navigation" class="main-navigation container-box" role="navigation" aria-expanded="false">
    Navigation
  </section>
</div>

最佳答案 将当前内容存储在变量中并比较每次单击以向下滑动内容,如下所示：

 jQuery('.container-box, .slideout-container').hide();
 var current_page,
     target = '';
 jQuery('.btn-group a').on('click', function () {
        var target = "#" + jQuery(this).data("target");

        if(current_page === target){
            jQuery('.slideout-container').slideUp();
            current_page = '';
        }else{
            jQuery('.slideout-container').slideDown();
            current_page = target;
        }
        jQuery('.container-box').not(target).hide().attr('aria-expanded', 'false');
        jQuery(target).show().attr('aria-expanded', 'true');


    });

这是工作：https://jsfiddle.net/06tfufo6/8/

点赞