点击<details>（不是<summary>）关闭“披露声明”？

Question

按照此处显示的简单示例<details>: The Details disclosure element [Mozilla.org]，如何单击“详细信息”以折叠这些详细信息？

例如，在动画 GIF 的上半部分下方是“摘要”，单击它会切换“详细信息”（如下）。

在某些情况下，这些细节会很长；我希望能够点击那里，折叠这些详细信息（而不是向上滚动到“摘要”部分）。

我正在通过 Ajax 生成我的 HTML 页面，因此我可能需要 Ajax/JQuery 解决方案。

这里是相关部分。

(function ($) {
    if (snippets_arr.length > 2) {
        fq_snippet += '<details><summary>' + snippets_arr.slice(0,2).join('<br/>');

        fq_snippet += '<br/>[toggle]</summary>' + snippets_arr.slice(2,).join('<br/>') + '</details>';
    }
    else {
        fq_snippet += snippets_arr.join('<br/>');
    }

  // Addendum: the solution involved this part of that file:
  init: function () {
      // add code here ...
        });
    });
  }
})(jQuery);

---

更新 1： 在与 @a.mola 聊天后解决了代码。单击“摘要”（顶部）切换打开/关闭“详细信息”视图（底部）。

新功能：点击“详细信息”（当然是打开时）会折叠“详细信息”视图。

这适用于页面上的所有（即多个）“详细信息/摘要”元素。

---

更新 2

我修改了代码以记住并在您折叠该部分后返回到滚动位置。

var scrollPosition = null;

/* REMEMBER, SET SCROLL POSITION
  *
  * Here I implemented a scroll position ["scrollPosition = $(window).scrollTop(); ..."] addition
  * to my "<details>" code, so that when you collapse a long <details> section you return to the 
  * original <summary> position.
  *
  *   https://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery
  *   https://stackoverflow.com/questions/10836428/how-to-maintain-page-scroll-position-after-a-jquery-event-is-carried-out/10836745
  *   https://stackoverflow.com/questions/32573532/jquery-how-to-return-to-the-exact-same-scroll-position-when-going-back-to-previ
  */

$(document).click(function(event) {
    /* ORIGINALLY (per StackOverflow discussion with user a.mola -- referenced above):
      *
      *   if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) event.target.removeAttribute('open');
      *
      * Modified to following, to allow use of "scrollPosition" to reset scroll position
      * when collapsing long <details> sections.
      */

    // if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('closed')) {
    if (event.target.tagName == 'SUMMARY') {
        // SAVE THE CURRENT SCROLL POSITION:
        scrollPosition = $(window).scrollTop();
        // console.log('[summary click] scrollPosition', scrollPosition, '| type:', typeof scrollPosition)
        // ----------------------------------------
        /* NOTE: "return" here exits this AND following if statement: */
        // return scrollPosition;
    }   /* if (event.target.tagName == 'SUMMARY') {} */

    if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) {
        scrollPosition = scrollPosition;
        // ----------------------------------------
        /* COLLAPSE <details> ELEMENT BY CLICKING ON THAT [<details>] ELEMENT:
          *   Per user a.mola:
          *   https://stackoverflow.com/questions/66609261/click-on-details-not-summary-to-close-disclosure-statement/66609543#66609543
          */
        event.target.removeAttribute('open');
        // ----------------------------------------
        // SET THE SCROLL POSITION FROM STORED SESSION VALUE:
        $(window).scrollTop(scrollPosition);
    }  /* if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) {} */
});    /* $(document).click(function(event) {} */

Answer 1

每当点击/触摸<summary></summary> 标记时，<details></details> 标记上的 open 属性就会设置以公开额外内容。

只需切换<details></details> 标记上的属性即可实现您需要的功能。

(function($) {
    // ...
    $(document).click(function(event) {
        if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) event.target.removeAttribute('open');
    });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>