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

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

工作 fiddle :http://jsfiddle.net/2mbs4wxp/4/

---

编辑

解决评论中描述的问题:

The content is fairly long in some list items, so when next one is clicked and previous collapses it sometimes leaves you at far below the clicked content.

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

工作 fiddle :http://jsfiddle.net/2mbs4wxp/6/