So fügen Sie zusammenklappbare Elemente in das Flexbox-Layout ein

Question

Ich habe ein Flexbox-Layout mit einem umschlossenen Bild und möchte einige Informationen anzeigen, wenn auf das Bild geklickt wird. Die Informationen sollten zwischen der Zeile, die das Bild enthält, und der Zeile direkt darunter erscheinen, ohne dass die „Spalte“ verschoben wird. Dies ist die Art von Effekt, die ich möchte: http://olmenta.altervista.org (wenn Sie auf ein Buch klicken). Folgendes habe ich getan: 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: "\2715" }
.cell .information .close:hover::after { content: "\2716" }

Nice Description