Question

我努力制作此处所见效果的副本：https://tu-dresden.de/if您点击语言，搜索，内部和蓝色标题中的导航。

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

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

谢谢

＆＃13;

$url = "";
$ch = curl_init();
curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
$result = curl_exec($ch);



echo ($result);


curl_close($ch);

＆＃13;

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

＆＃13;

.btn-group {
  background-color: #002557;
}

a {
  color: #fff;
  padding: 10px 20px;
}

.slideout-container {
  padding: 25px 0;
  background: #ccc;
}

＆＃13;

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 true / false部分，但这应该可以让您继续。

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

   });

这是a working fiddle。

Slidetoggle有多个div

2 个答案: