帶有多個div的Slidetoggle

Question

我正在努力復制此處看到的效果： https : //tu-dresden.de/如果您單擊語言，搜索，內部以及藍色標題中的導航。

我設法創建了這個： 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> 

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/

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');
     }

   });

這是工作中的小提琴 。