完全响应式可折叠图像无法正常工作

Question

我有一堵图像墙，当单击图像时，单独的

div

会滚到单击图像的行下方。目前它是完全响应式的，这意味着当屏幕尺寸减小时，它会创建更多的行，并且可折叠的总是落在图像行下方。我需要可折叠的

div

横跨整个容器。

但是，在我现在的代码中，具有类

div

的可折叠

.info

会根据单击的图像不断左右移动。我只希望

.info

div 留在容器内并保持在每行的同一位置。

例如，当单击第一行中的图像时，

.info

div 会向下滚动并显示信息。然后，当单击同一行上的第三个图像时，

.info

div 位于同一位置，但只是文本发生变化。然后，当单击第二行上的图像时，第一行上的

.info

关闭，然后

.info

div 在第二行下方打开，跨越整个容器宽度。

function toggleInfo(element) {
  const allPartners = document.querySelectorAll('.partner');
  allPartners.forEach(partner => {
    if (partner !== element) {
      partner.classList.remove('active');
    }
  });

  element.classList.toggle('active');
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.partner {
  position: relative;
  width: calc(25% - 5px);
  /* 4 images per row with 5px gap */
  cursor: pointer;
  margin-bottom: 20px;
  /* Space for the info box */
}

.image-wrapper {
  position: relative;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  color: white;
  font-size: 1.5rem;
  z-index: 1;
}

.info {
  display: none;
  background-color: white;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  width: 100vw;
  left: 10px;
  /* Adjust for body padding */
  transform: translateX(-50%);
  margin-top: 10px;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.partner.active .info {
  display: block;
  animation: slideDown 0.3s ease;
}

.partner.active .image-wrapper img {
  opacity: 1;
}

.partner:not(.active) .image-wrapper img {
  opacity: 0.5;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    /* Adjust as needed */
    opacity: 1;
  }
}


/* Responsive Design */

@media (max-width: 800px) {
  .partner {
    width: calc(50% - 5px);
    /* 2 images per row on smaller screens */
  }
}

@media (max-width: 500px) {
  .partner {
    width: 100%;
    /* 1 image per row on very small screens */
  }
}

<div class="container">
  <!-- Generate 8 partner entries with placeholder images -->
  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 1">
      <div class="gradient">
        <span class="name">Partner 1</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 1...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 2">
      <div class="gradient">
        <span class="name">Partner 2</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 2...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 3">
      <div class="gradient">
        <span class="name">Partner 3</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 3...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 4">
      <div class="gradient">
        <span class="name">Partner 4</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 4...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 5">
      <div class="gradient">
        <span class="name">Partner 5</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 5...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 6">
      <div class="gradient">
        <span class="name">Partner 6</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 6...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 7">
      <div class="gradient">
        <span class="name">Partner 7</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 7...</p>
    </div>
  </div>

  <div class="partner" onclick="toggleInfo(this)">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/200x300" alt="Partner 8">
      <div class="gradient">
        <span class="name">Partner 8</span>
      </div>
    </div>
    <div class="info">
      <p>More information about Partner 8...</p>
    </div>
  </div>
</div>

Answer 1

尝试这个 CSS 配置。您无需更新 HTML 和 JavaScript。只需更新我提供的 CSS 代码即可。

function toggleInfo(element) {
            const allPartners = document.querySelectorAll('.partner');
            allPartners.forEach(partner => {
                if (partner !== element) {
                    partner.classList.remove('active');
                }
            });
            
            element.classList.toggle('active');
        }

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.partner {
  position: relative;
  width: calc(25% - 5px); /* 4 images per row with 5px gap */
  cursor: pointer;
  margin-bottom: 20px; /* Space for the info box */
}

.image-wrapper {
  position: relative;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  color: white;
  font-size: 1.5rem;
  z-index: 1;
}

.info {
  display: none;
  background-color: white;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px; /* Adds space between image and info */
}

.partner.active .info {
  display: block;
  animation: slideDown 0.3s ease;
}

.partner.active .image-wrapper img {
  opacity: 1;
}

.partner:not(.active) .image-wrapper img {
  opacity: 0.5;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    /* Adjust as needed */
    opacity: 1;
  }
}

/* Responsive Design */

@media (max-width: 800px) {
  .partner {
    width: calc(50% - 5px); /* 2 images per row on smaller screens */
  }
}

@media (max-width: 500px) {
  .partner {
    width: 100%; /* 1 image per row on very small screens */
  }
}

<body>
    <div class="container">
        <!-- Generate 8 partner entries with placeholder images -->
        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 1">
                <div class="gradient">
                    <span class="name">Partner 1</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 1...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 2">
                <div class="gradient">
                    <span class="name">Partner 2</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 2...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 3">
                <div class="gradient">
                    <span class="name">Partner 3</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 3...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 4">
                <div class="gradient">
                    <span class="name">Partner 4</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 4...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 5">
                <div class="gradient">
                    <span class="name">Partner 5</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 5...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 6">
                <div class="gradient">
                    <span class="name">Partner 6</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 6...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 7">
                <div class="gradient">
                    <span class="name">Partner 7</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 7...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 8">
                <div class="gradient">
                    <span class="name">Partner 8</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 8...</p>
            </div>
        </div>
    </div>