多个div的滑动切换

Question

我正在努力复制此处所见效果：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>

- HelloWorld

---

不是太难，但你需要稍微改变一下 HTML。SlideToggle 不会按照你的意愿工作，因为它会上下滑动整个容器，而不是目标元素... - sinisake

Answer 1

将当前内容存储在变量中，并比较每次单击以展开和收起内容，代码应如下：

 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/

- Jose Rojas

Answer 2

对于您所描述的功能，您需要能够跟踪初始元素，然后仅在单击引发元素时调用切换代码（假设我理解了您的意图）。下面的代码就是这样做的。

您需要调整代码中aria-expanded的真/假部分，但这应该可以让您开始。

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

     // If no other elements have instigator class, add to target
     if (!jQuery(".btn-group a.instigator").length) {
       $target.addClass("instigator");
     }

     if ($target.hasClass("instigator")) {
       jQuery('.slideout-container').slideToggle();
       jQuery(target).show().attr('aria-expanded', 'true');
     } else {
       jQuery('.container-box').not(target).hide().attr('aria-expanded', 'false');
       jQuery(target).show().attr('aria-expanded', 'true');
     }

   });

这里是一个可用的fiddle示例。

- James Hill