javascript - 单击以显示更多内容 - 2 列

标签 javascript jquery html css toggle

我正在尝试构建一个 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>

最佳答案

更新

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

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。 图片的实际内容隐藏在元素元素中。

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 will always return the element we clicked on, not the one the event was attached on

使用 .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;
}

元素容器将有 display flex，以连续显示所有元素卡(带换行)。为了确保每行有 2 张卡片，我们将元素元素的 flex-basis 设置为 50%。

原始答案

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

这意味着..

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

将切换具有“project-content”类的每个元素。

为了让事情更简单，我建议将您的 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 中的每个事件都有一个事件对象作为第一个参数(此处为“e”)。 该事件包含被点击的元素(“e.target”)。 有了它，我们可以找出我们在哪里，只改变那个地方的东西。

$(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.

关于javascript - 单击以显示更多内容 - 2 列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49861632/

上一篇：javascript - HTML5 Canvas，导入本地字体？

下一篇：html - CSS:带有一个 <ul> 且行数固定的目录页面

相关文章：

javascript - 在更改上一个选择框中的相同项目时禁用项目

javascript - JSLint 警告 "document"未在 jQuery(document).ready 上完全定义

javascript - 如何在 Apollo Client React 中获取多个条件查询？

javascript - 如何在客户/用户进入网站后立即激活功能

javascript - 我如何检查 parent 在 html 中是 span 还是 anchor？

html - 使用视口(viewport)将站点保持在固定大小？

javascript 无法在 struts html 标签上工作

javascript - 运行函数时 Node.js 设置 'this'

javascript - 奇怪的 jQuery 单选按钮显示/隐藏错误

Javascript 函数未在所需字段中给出算术值

©2024 IT工具网  联系我们