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

问题描述 投票:1回答:2

我一直在尝试摘要和详细信息列表,但是当单击列表中的下一个时,找不到找到使它自动折叠的方法...

这里有我的代码:

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自动再次折叠。帮助将不胜感激!

javascript jquery css html html-lists
2个回答
0
投票

想法


0
投票

如果您想使用纯JavaScript解决方案,请尝试以下操作:

© www.soinside.com 2019 - 2024. All rights reserved.