如何将可折叠元素插入到 Flexbox 布局中

Question

我有一个图像绕行的弹性盒布局，我想在单击图像时显示一些信息。该信息应显示在包含图像的行与其正下方的行之间，而不移动“列”。这就是我想要的效果类型：http://olmenta.altervista.org（当您单击一本书时）。这是我所做的：https://jsfiddle.net/fabhpnw9/3/varcoll=document.getElementsByClassName("re

P粉739942405 · Answer

详细信息披露元素已经有一个浏览器内置的打开/关闭机制。那么为什么不使用它并修改其行为来满足我们的要求。

基本原则是


   some clickable content
   
      Any content you want to disclose when the  gets clicked

通过 CSS，我们可以控制内容的显示方式和位置。无论我们使用默认的块样式还是 Flexbox/Grid 布局，都将内容放置在常规文档流之外。它们是常规元素，所以基本上任何事情都会发生。
默认情况下，当用户点击其他地方时 detail/summary 保持打开状态，我们需要一些 Javascript 来自动关闭当前“公开”的内容。
当用户没有看到“关闭按钮”时，他们往往会感到困惑，所以我在那里放了一个。但是，单击信息框中的任意位置将其关闭。

我对此有点过分了，创建了一个响应式演示，完全忽略了您的代码（抱歉！），同时尝试尽可能接近示例站点。我评论了所有适用的地方。如果不清楚，请在评论中告诉我。

片段

// Contains a reference to the current 'open'  element
var currentDetail;

// Walk the list of all grid cells => 
document.querySelectorAll('.grid .cell').forEach(el => {

    // Walk the list of grid cell children and attach eventlisteners
    for (const child of el.children) {

        // When it's a preview, toggle its information box
        // or open another when the information box is already visible.
        if (child.classList.contains('preview')) {
            // this event triggers before  'toggle' event
            child.addEventListener("click", event => { toggleDetails(event.currentTarget.closest('.cell')) });
            // Finds closest parent .cell
        }

        // When it is an information box, just close it.
        if (child.classList.contains('information')) {
            child.addEventListener("click", event => { closeDetails() });
        }
    };
});

function toggleDetails(el) {
    if (el.open) { /* Browser is about to trigger details 'toggle' */
        currentDetail = null; // all details closed
    }
    else { // not null and different detail
        if ((currentDetail) && (currentDetail != el)) {

            currentDetail.removeAttribute('open'); // close current open detail
        };
        currentDetail = el; // save new opened detail
    };
};

function closeDetails() {
    if (currentDetail) { // Details open?
        currentDetail.removeAttribute('open'); // close current open detail
        currentDetail = null;                  // all details closed
    };
};

/* * { outline: 1px dashed } /* for debugging */

/********************************/
/* some convenient global rules */
/********************************/
*, ::before, ::after { box-sizing: border-box }
/* makes padding and border part of any element total size, margin never */

html, body  { width: 100%; max-width: 100% }
html        { scroll-behavior: smooth }

body {
    margin: unset; /* Kill default margin */

    min-height: 100vh;
    line-height: 1.5;
    padding: 1rem;

    overscroll-behavior: contain; /* Check MDN for this */
}

details, /* Remove CSS defaults */
summary { padding: 0; list-style: none }

img {
    display: block;        /* removes little whitespace below image */
    width: 100%;           /* stretch to full width */
    aspect-ratio: 1 / 1.5; /* or height: auto, your choice */
    object-fit: cover;     /* fill parent, but clip when it doesn't fit */
}

/* Responsive font sizing */
/* Using linear equation y=mx+b => y=0.00625x + 12 (320,14)(1280,20) */
html { font-size: calc(0.625vmin + 0.75rem) }
body { font-size: 1rem }

/************************************/
/* DEMO, base layout - mobile first */
/************************************/
.grid {
    display: flex; flex-flow: row wrap;
    justify-content: center;
    gap: 1rem;
}

.cell {
    /* fiddle with these properties */
    flex-grow: 1;                /* [OPTIONAL] */
    min-width: min(12rem, 100%); /* set to desired width */

    cursor: pointer;
}

.cell .preview { border: 1px solid Black }

.cell .information {
    overflow: auto; overscroll-behavior: contain;

    position: fixed;    /* within viewport */
    z-index: 99999;     /* over any body content */
    inset: 0%;          /* full screen */

    gap: 1rem;
    padding: 4rem 1rem 1rem;

    background-color: hsl(0,0%,14%); color: hsl(0,0%,90%);

    cursor: default;
}

/****************************/
/* Some responsive behavior */
/****************************/
@media all and (min-width: 361px) {
    .cell .information {
        display: flex; flex-flow: row wrap; justify-content: center;

        inset: 30% 0% 0%;   /* stay % from sides */
        padding: 4rem;
        opacity: 0.985;
    }

    .cell .information img {
        width: auto; max-width: min(360px, 100%);
    }
}
/* Dito */
@media all and (min-width: 721px) {
    .cell {
        flex-grow: 0; /* [OPTIONAL] */
    }
}
/* Allow content to grow, only relevant on +360px devices */
/* as <361px are has no flexbox parent */
.cell .information > * { flex: 1 }

/**********************************************/
/* The .information 'x' close button behavior */
/**********************************************/
.cell .information .close {
    position: absolute; top: 0.75rem; right: 1.25rem;
    font-size: 2em; font-style: normal;

    cursor: pointer;
}
.cell .information .close::after       { content: "15" }
.cell .information .close:hover::after { content: "16" }

Nice Description