使摘要详细信息元素自动折叠

Question

我一直在尝试摘要和详细信息列表，但无法找到一种方法使其在单击列表中的下一个时自动折叠...

这是我的代码：

HTML：

<div class="content">
                    <header class="major">
                        <h2>Stuff I do</h2>
                    </header>
                    <p>Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet vulputate.</p>
                    <ul class="alt">
                        <li>
                            <details><summary><span class="icon major fa-camera-retro"></span>
                            <h3>List item 1</h3><p>Donec accumsan interdum nisi</p></summary>
                            <p>Aliquam ante ac id. Adipiscing interdum lorem praesent fusce pellentesque arcu feugiat. Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet integer vulputate phasellus lorem ipsum dolor lorem magna consequat sed etiam adipiscing interdum.</p></details>
                        </li>
                        <li>
                            <details><summary><span class="icon major fa-pencil"></span>
                            <h3>List item 2</h3><p>Donec accumsan interdum nisi</p></summary>
                            <p>Aliquam ante ac id. Adipiscing interdum lorem praesent fusce pellentesque arcu feugiat. Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet integer vulputate phasellus lorem ipsum dolor lorem magna consequat sed etiam adipiscing interdum.</p></details>
                        </li>
                        <li>
                            <details><summary><span class="icon major fa-code"></span>
                            <h3>list item 3</h3><p>Donec accumsan interdum nisi</p></summary>
                            <p>Aliquam ante ac id. Adipiscing interdum lorem praesent fusce pellentesque arcu feugiat. Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet integer vulputate phasellus lorem ipsum dolor lorem magna consequat sed etiam adipiscing interdum.</p></details>
                        </li>
                        <li>
                            <details><summary><span class="icon major fa-coffee"></span>
                            <h3>List item 4</h3><p>Donec accumsan interdum nisi</p></summary>
                            <p>Aliquam ante ac id. Adipiscing interdum lorem praesent fusce pellentesque arcu feugiat. Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet integer vulputate phasellus lorem ipsum dolor lorem magna consequat sed etiam adipiscing interdum.</p></details>
                        </li>
                    </ul>
                </div>

CSS：

details summary::-webkit-details-marker {
display: none;}

summary:hover {
cursor: pointer;
color: #fff200;

}

因此，当打开“列表项 1”并单击“列表项 3”时，我希望项 1 再次自动折叠。非常感谢您的帮助！

Answer 1

想法

1. 加载时，slideUp() li 内的所有段落，因此只有标题可见。
2. 在每个标题上附加点击处理程序，所以一旦点击，它slideUp()所有其他项目，slideDown()被点击的项目。

实施

更改 html 以添加类，以便 jQuery 可以引用它们（class="click" 和 class="collapsable"）：

<li class="click">
  <details><summary><span class="icon major fa-coffee"></span>
    <h3>List item 4</h3><p>Donec accumsan interdum nisi</p></summary>
      <p class="collapsable">Aliquam ante ac id. Adipiscing interdum lorem praesent fusce pellentesque arcu feugiat.

jQuery 加载：

$('.collapsable').slideUp();
$( '.click' ).on( "click", function() {
    $('.collapsable').slideUp();
    $('.collapsable', this).slideDown();
});

工作小提琴：http://jsfiddle.net/2mbs4wxp/4/

---

编辑

解决评论中描述的问题：

某些列表项的内容相当长，所以当下一个是 单击并先前折叠它有时会使您远离下方 点击的内容。

将animate({scrollTop... 链接到slideDown() 事件，以便您点击的 div 滚动到屏幕顶部。你只需要稍微改变一下你的 jQuery：

$('.collapsable').slideUp();
$( '.click' ).on( "click", function() {
    $('.collapsable').slideUp();
    $('.collapsable', this).slideDown().promise().done(function(){
      $('html,body').animate({scrollTop: $(this).offset().top - 100}, 200);
    });
});

工作小提琴：http://jsfiddle.net/2mbs4wxp/6/

Answer 2

如果你想要一个纯 JavaScript 解决方案，试试这个：

把这个函数放在你的文档中：

function thereCanBeOnlyOne(elementId) {
  var detailsElements = document.getElementsByTagName('details');
  for (var i=0; i<detailsElements.length; i++) {
    if (detailsElements[i].id != elementId && detailsElements[i].classList.contains('collapsible')) {
      detailsElements[i].removeAttribute('open');
    }
  }
}

然后在你的 HTML 中：

1) 使用 'collapsible' 的类并在细节上放置一个 id 属性

2) 将 onclick 处理程序添加到摘要中。

<details id="one" class="collapsible" open=true>
<summary onclick="thereCanBeOnlyOne('one');">One</summary>

有关演示，请参阅：https://waxphilosophic.sdf.org/webdev/accordian/summary-details-js.html

如果您不关心仅将某些摘要/详细信息标记为可折叠，则可以进一步简化。