如何将可折叠元素插入到 Flexbox 布局中-PHP中文网问答

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

这是我所做的：https://jsfiddle.net/fabhpnw9/3/

var coll = document.getElementsByClassName("rectangle");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.flex-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.rectangle {
  width: 200px;
  height: 50px;
  background-color: red;
  cursor: pointer;
}

.text {
  display: none;
  position: absolute;
}


  
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  
  
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  
  
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  
  
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  
  
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  
  
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  
  
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  
  
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit

由于弹性项目的大小发生变化，“列”正在移动。我可以通过在文本中添加“position:absolute”来解决此问题，但随后文本与下一行发生冲突。你知道我如何才能让列不移动并且文本不与下一行冲突吗？

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

Lorem ipsum dolor sit amet, id pri eirmod dolores ponderum. Per ea case posse libris, eros magna ius no. Rebum dicat legere sit ut. Mentitum consequat eam et. Omnis quaeque blandit mei in. Ius debet vulputate ut.

Nice Description

.flex-container { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .flex-item { width: 200px; } .rectangle { width: 200px; height: 50px; background-color: red; cursor: pointer; position: relative; } .flex-item.active { height: 155px; } .flex-item:not(.active) .text { display: none; } .text { position: absolute; left: 0px; width: 100%; padding: 10px; text-align: center; margin-top: 5px; height: 100px; background: grey; color: #fff; box-sizing: border-box; } /*tooltip styles*/ .flex-item.active .rectangle::after { content: ''; border: solid 10px transparent; border-bottom: solid 10px grey; position: absolute; bottom: -5px; left: calc(50% - 5px); }

Lorem ipsum dolor sit amet, consectetur adipiscing elit

全部回复(2)

P粉7399424052024-03-20 14:07:10 2楼

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

基本原则是

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

赞 +0

添加回复

P粉0418819242024-03-20 09:09:13 1楼

如果我们切换到在 .flex-item 上切换 active 类，我们可以为活动 .flex-item 添加高度，以便为 .text 留出空间。

注意：为了正确定位 .text 元素，重要的是不要定位 .flex-items（或 position: static）。否则 .text 的 left: 0 将位于父级 .flex-item 的左侧。

这是一个工作示例的片段：

var coll = document.getElementsByClassName("rectangle");
var i;

for (i = 0; i  x.classList.remove('active'))
    this.parentElement.classList.add("active");
  });
}