更新

Question

我正在尝试构建一个2列网格，显示项目页面的封面图像和标题。当用户点击链接的图像时，会在下面显示更多内容，使封面图像区域就位。

目前我已经走到了这一步; https://codepen.io/whitinggg/pen/vRoRKx

我正在使用.toggle函数来显示/隐藏简单Flexbox布局上的隐藏内容，以实现2列网格。

目前，当您点击以显示内容时，右侧列会在左下方显示，并且所有隐藏的内容框都会显示，而不仅仅是已点击的内容。

当我打开一个时，如何阻止右栏下方并关闭所有其他隐藏内容区域？

这是我获得页面灵感的地方，你可以看到它在这里工作：https://www.balfourbeatty.com/showcase/

$(document).ready(function(){
        $("button").click(function(){
            $(".project-content").toggle();
        });
    });

.projects-container {
      display: flex;
      flex-direction: column;
      flex-flow: wrap;
    }
    .project {
      width: 50%;
    }
    
    .project img {
      width: 100%;
      margin: 0;
      padding: 0;
      display: block;
    }
    .project-link {
      background-color: #a54949;
      padding: 10px;
      text-align: right;
      margin: 0 0 20px 0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="projects-container">
      
      <div class="project">
        <img src="https://picsum.photos/800/400" class="">
        <div class="project-link">
          <button>Read More/Less</button>
        </div>
      </div>
      <div class="project-content" style="display:none;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum in odio accumsan luctus. Quisque vestibulum erat a mi sollicitudin molestie. Integer blandit rhoncus metus vel cursus. Suspendisse dapibus, justo vehicula egestas sagittis, quam risus dignissim dolor, sit amet malesuada nisi justo sit amet augue. Fusce mollis nulla at felis vehicula vulputate. Vivamus ex eros, ultrices eu felis at, porttitor aliquam dolor. Fusce varius arcu vitae efficitur vestibulum. Nullam vel eros aliquet mauris varius pharetra.</p>
    
        <p>Praesent sit amet malesuada purus. Etiam eleifend libero sed magna porta fringilla. Etiam quis ultrices risus. Suspendisse cursus sit amet ex et porttitor. Sed venenatis vulputate lobortis. Curabitur at laoreet est. Maecenas tincidunt magna vitae ex fringilla, at tincidunt erat tempor. In lacinia, quam sit amet fermentum malesuada, est est fermentum leo, vel lobortis nulla purus vel nunc. Proin tempus id neque in rhoncus.</p>
        </div>
      
      <div class="project">
        <img src="https://picsum.photos/800/400" class="">
        <div class="project-link">
          <button>Read More/Less</button>
        </div>
      </div>
      <div class="project-content" style="display:none;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum in odio accumsan luctus. Quisque vestibulum erat a mi sollicitudin molestie. Integer blandit rhoncus metus vel cursus. Suspendisse dapibus, justo vehicula egestas sagittis, quam risus dignissim dolor, sit amet malesuada nisi justo sit amet augue. Fusce mollis nulla at felis vehicula vulputate. Vivamus ex eros, ultrices eu felis at, porttitor aliquam dolor. Fusce varius arcu vitae efficitur vestibulum. Nullam vel eros aliquet mauris varius pharetra.</p>
    
        <p>Praesent sit amet malesuada purus. Etiam eleifend libero sed magna porta fringilla. Etiam quis ultrices risus. Suspendisse cursus sit amet ex et porttitor. Sed venenatis vulputate lobortis. Curabitur at laoreet est. Maecenas tincidunt magna vitae ex fringilla, at tincidunt erat tempor. In lacinia, quam sit amet fermentum malesuada, est est fermentum leo, vel lobortis nulla purus vel nunc. Proin tempus id neque in rhoncus.</p>
        </div>
      
      <div class="project">
        <img src="https://picsum.photos/800/400" class="">
        <div class="project-link">
          <button>Read More/Less</button>
        </div>
      </div>
      <div class="project-content" style="display:none;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum in odio accumsan luctus. Quisque vestibulum erat a mi sollicitudin molestie. Integer blandit rhoncus metus vel cursus. Suspendisse dapibus, justo vehicula egestas sagittis, quam risus dignissim dolor, sit amet malesuada nisi justo sit amet augue. Fusce mollis nulla at felis vehicula vulputate. Vivamus ex eros, ultrices eu felis at, porttitor aliquam dolor. Fusce varius arcu vitae efficitur vestibulum. Nullam vel eros aliquet mauris varius pharetra.</p>
    
        <p>Praesent sit amet malesuada purus. Etiam eleifend libero sed magna porta fringilla. Etiam quis ultrices risus. Suspendisse cursus sit amet ex et porttitor. Sed venenatis vulputate lobortis. Curabitur at laoreet est. Maecenas tincidunt magna vitae ex fringilla, at tincidunt erat tempor. In lacinia, quam sit amet fermentum malesuada, est est fermentum leo, vel lobortis nulla purus vel nunc. Proin tempus id neque in rhoncus.</p>
        </div>
      
      <div class="project">
        <img src="https://picsum.photos/800/400" class="">
        <div class="project-link">
          <button>Read More/Less</button>
        </div>
      </div>
      <div class="project-content" style="display:none;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum in odio accumsan luctus. Quisque vestibulum erat a mi sollicitudin molestie. Integer blandit rhoncus metus vel cursus. Suspendisse dapibus, justo vehicula egestas sagittis, quam risus dignissim dolor, sit amet malesuada nisi justo sit amet augue. Fusce mollis nulla at felis vehicula vulputate. Vivamus ex eros, ultrices eu felis at, porttitor aliquam dolor. Fusce varius arcu vitae efficitur vestibulum. Nullam vel eros aliquet mauris varius pharetra.</p>
    
        <p>Praesent sit amet malesuada purus. Etiam eleifend libero sed magna porta fringilla. Etiam quis ultrices risus. Suspendisse cursus sit amet ex et porttitor. Sed venenatis vulputate lobortis. Curabitur at laoreet est. Maecenas tincidunt magna vitae ex fringilla, at tincidunt erat tempor. In lacinia, quam sit amet fermentum malesuada, est est fermentum leo, vel lobortis nulla purus vel nunc. Proin tempus id neque in rhoncus.</p>
        </div>
      
    </div>

Answer 1

更新

我已经更好地了解了您链接的展示。我试图重新创建我认为你试图实现的基本实现。

https://codepen.io/bitmonk/pen/rdXKgP

HTML

<div class="projects-container">

  <div class="project">
    <div class="image">
      <img src="https://picsum.photos/800/400" class="">
      <div class="caption">Caption</div>
      <div class="project-content" style="display:none;">
        <p>Lorem 1</p>
      </div>
    </div>
  </div>

  <div class="project">
    <div class="image">
      <img src="https://picsum.photos/800/400" class="">
      <div class="caption">Caption</div>
      <div class="project-content" style="display:none;">
        <p>Lorem 2</p>
      </div>
    </div>
  </div>

  <div class="project">
    <div class="image">
      <img src="https://picsum.photos/800/400" class="">
      <div class="caption">Caption</div>
      <div class="project-content" style="display:none;">
        <p>Lorem 3</p>
      </div>
    </div>
  </div>

</div>

<div class="content"></div>

我们想要展示的内容将是.content，它位于＆＃34; gallery＆＃34;之外。图像的实际内容隐藏在项目元素中。

JS

$(document).ready(function(){
    $(".project").click((e) => {
      const $this = $(e.currentTarget);
      const content = $this.find(".project-content").html();
      $(".content").html(content);
    });
});

通过这个我们捕获项目卡上的点击。使用$（e.currentTarget），我们确保始终将实际的.project元素作为jQuery对象

e.target将始终返回我们点击的元素，而不是事件附加在
上的元素

使用.html（）我们可以获取隐藏项目内容的HTML内容，我们将使用相同的方法为外部内容元素设置该内容。

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 50px;
}

.projects-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.project {
  flex-basis: 50%;
  overflow: hidden;
  border: 2px solid white;
}
.project .image {
  position: relative;
  cursor: pointer;
}
.project .image img {
  width: 100%;
  display: block;
  transition: all 300ms;
}
.project .image:hover img {
  transform: scale(1.2);
}
.project .image .caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.6);
  padding: 8px;
}

.content {
  padding: 25px;
  font-size: 16px;
}

项目容器将显示flex，以连续显示所有项目卡（带有换行）。为了确保每行中有2张牌，我们将项目元素的flex-basis设置为50％。

原始答案

在jQuery选择器中可以选择多个元素。

这意味着......

$(".project-content").toggle();

将使用类＆＃34; project-content＆＃34;。

切换每个元素

为了简化操作，我建议您将HTML更改为：

<div class="projects-container">

  <div class="project">
    <img src="https://picsum.photos/800/400" class="">
    <div class="project-link">
      <button>Read More/Less</button>
    </div>
    <div class="project-content" style="display:none;">
      <p>Lorem</p>
    </div>
  </div>

  <div class="project">
    <img src="https://picsum.photos/800/400" class="">
    <div class="project-link">
      <button>Read More/Less</button>
    </div>
    <div class="project-content" style="display:none;">
      <p>Lorem</p>
    </div>
  </div>

  <div class="project">
    <img src="https://picsum.photos/800/400" class="">
    <div class="project-link">
      <button>Read More/Less</button>
    </div>
    <div class="project-content" style="display:none;">
      <p>Lorem</p>
    </div>
  </div>

</div>

你的JQuery对此：

$(document).ready(function(){
    $("button").click(function(e){
      $(e.target).parents(".project").find(".project-content").toggle();
    });
});

jQuery中的每个事件都有一个Event-Object作为第一个参数（这里是＆＃34; e＆＃34;）。此事件包含单击的元素（＆＃34; e.target＆＃34;）。有了它，我们可以找到我们的位置，只改变那个地方的东西。

$(e.target) = jQuery object of the currently clicked button

.parents(".project") = go back in the tree until we find an element with class ".project"

.find(".project-content") = find the project-content inside that element.

Answer 2

把.project-content放在.project里面应该解决布局问题。

对于点击事件，你刚刚告诉它打开所有带有类项目内容的元素 - 你需要告诉它哪一个，用jquery它是这样的：

$(this).parents('.project').find('.project-content').toggle();

点击显示更多内容 - 2列

2 个答案:

更新

HTML

JS

CSS

原始答案