使用jQuery / JS </details>打开时,使<details>标签的内容生动

时间:2014-01-24 22:36:14

标签: javascript jquery html5

我只是希望HTML5 详细信息标记的内容为'滑动'/动画打开,而不是立即弹出/显示。这有可能与jQuery / Javascript?

Fiddle

HTML:

<details>
<summary>Show/Hide</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet metus auctor tempor dignissim. Nunc tempor ligula malesuada, adipiscing justo quis, ultrices libero. Curabitur pretium odio sagittis lorem euismod, a ultrices sem ultrices. Integer sapien nibh, mollis id pretium id, dignissim ut dui. Nam sit amet lectus lectus. Cras scelerisque risus a dui accumsan, in dignissim dolor sodales. Nunc aliquam pharetra dui, a consectetur velit lobortis vel.</p>
<p>Mauris convallis orci in semper aliquam. Ut mollis laoreet nibh pretium tincidunt. Donec aliquam at odio sit amet dictum. Phasellus sapien leo, feugiat sit amet sagittis in, congue vel lectus. Donec elementum est vitae nulla interdum laoreet. Curabitur fringilla a tellus non laoreet. Aliquam vel lectus convallis massa pulvinar pellentesque. Mauris laoreet pharetra turpis vel tristique. Sed ligula ligula, sodales sed auctor in, aliquam sit amet lorem. Etiam vestibulum, libero vel dignissim ultrices, lacus mauris lacinia enim, quis aliquam nibh mauris eu mauris. Etiam sapien leo, dapibus et libero sed, laoreet ornare tellus.</p>
<p>Sed placerat vehicula magna et adipiscing. Nam euismod nibh ut tellus tempor, eget lobortis metus iaculis. In laoreet, enim in dignissim pellentesque, felis augue tincidunt massa, vestibulum fringilla mauris sapien in diam. Duis interdum molestie fermentum. Aenean dictum varius augue, id luctus neque viverra id. Nam eleifend tempus mauris in mattis. Sed id risus non magna semper blandit in vel arcu. Suspendisse quis nisi ligula. Fusce vestibulum at enim eu.</p>
</details>

2 个答案:

答案 0 :(得分:4)

太糟糕了,无法使用简单的CSS转换。

因此,我建议包装summary元素的兄弟元素,然后使用.slideToggle()。但事实并非如此简单,您需要将open属性添加到details,并默认隐藏内部包装的元素。

仅当您使用e.preventDefault()来阻止默认功能时才有效;但是,您需要重写箭头指示符()。

您可以使用summary::-webkit-details-markerdisplay:none删除不再有效的标记,并通过:before / :after伪元素添加自己的自定义标记。< / p>

UPDATED EXAMPLE HERE

$('details summary').each(function(){
    $(this).nextAll().wrapAll('<div id="wrap"></div>');
});
$('details').attr('open','').find('#wrap').css('display','none');
$('details summary').click(function(e) {
    e.preventDefault();
    $(this).siblings('div#wrap').slideToggle(function(){
        $(this).parent('details').toggleClass('open');
    });
});

<强> CSS:

summary::-webkit-details-marker {
    display: none;
}
summary:before {
    content: "►";
}
details.open summary:before {
    content: "▼";
}

如果您希望默认情况下打开details元素,请添加class="open"而不是属性open,然后使用:$('details.open div#wrap').css('display','block');

ALTERNATIVE EXAMPLE - (默认打开)

答案 1 :(得分:0)

根据@JoshCrozier's answer,我制作了一个使用open属性而非额外open类的解决方案。这样您就不必更改css了。

如果您想使用css更改<details>元素的外观,无论浏览器是否支持<details>元素,您都可以使用相同的样式规则,无论javascript是否为在浏览器中启用,因为您只需要考虑open属性,而不需要特殊的类。

此外,包装元素上没有特殊的id,使解决方案更加健壮和通用。

此外,此解决方案还会考虑默认情况下应打开的<details>个元素。

$('details summary').each(function() {
   var $Wrapper = $(this).nextAll().wrapAll('<div></div>').parent();
   // Hide elements that are not open by default
   if(!$(this).parent('details').attr('open'))
      $Wrapper.hide();
   $(this).click(function(Event) {
      Event.preventDefault();
      if($(this).parent('details').attr('open')) {
         $Wrapper.slideUp(function() {
            // Remove the open attribute after sliding so, so the animation is visible in browsers supporting the <details> element
            $(this).parent('details').removeAttr('open');
         });
      } else {
         // Add the open attribute before sliding down, so the animation is visible in browsers supporting the <details> element
         $(this).parent('details').attr('open', true);
         $Wrapper.slideDown();
      }
   });
});