点击<details>（不是<summary>）关闭"disclosure statement"？

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 的代码聊天后。单击“摘要”（顶部）切换打开/关闭“详细信息”视图（底部）。

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

这适用于页面上的所有（即多个）“details/summary”元素。

更新 2

我修改了代码以记住 return 到滚动位置，折叠该部分后。

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.
  *
  *   
  *   
  *   
  */

$(document).click(function(event) {
    /* ORIGINALLY (per Whosebug 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:
          *   
          */
        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> 标签上设置打开属性以显示额外内容。

只需切换 <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>

点击<details>（不是<summary>）关闭"disclosure statement"？

Click on <details> (not <summary>) to close "disclosure statement"?

html

toggle