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

观

加载slideUp() li内的所有段落，因此只有标题可见。
在每个标题上附加点击处理程序，因此点击后，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 onload：

$('.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解决方案，请尝试以下操作：

将此功能放在文档的中：

from flask import Flask, request, jsonify

persistant = 0
app = Flask(__name__)

@app.route('/counter')
def counter():
    global persistant 
    persistant += 1
    return str(persistant)

if  __name__ == '__main__':
    app.run(host = '0.0.0.0', port = 5000)

然后在您的HTML中：

1）使用“可折叠”类，并在详细信息上添加id属性

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

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

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

如果您不在乎仅将某些摘要/细节标记为可折叠，则可以进一步简化。

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

2 个答案:

观

实施

修改