- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试构建一个 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
<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。图片的实际内容隐藏在元素元素中。
$(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 内容,我们将使用相同的方法为我们的外部内容元素设置该内容。
* {
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/
我正在开发一个带选项卡栏的 ios 应用程序。我的栏上有超过 5 个按钮,所以在 iphone 上我有更多的按钮。现在,假设我有这个按钮:Button1 Button2 Button3 Button4
我有一个带有 UITabBarController 的应用,其中有超过五个选项卡。 当我按更多选项卡时,我会转到moreNavigationController,它是一个UINavigationCon
我有一个导航 Controller 。 NAVC->MORE... 按钮,然后在“更多”下有一些额外的 VC。 如果我转到“更多...”下的 VC,然后转到不在“更多...”上的 VC,那么当我返回到
因此,我想出了这种方案,用于在多个线程同时具有读写访问权限的二叉树中旋转时锁定节点,这涉及每次旋转锁定四个节点,这似乎是一个很多吗?我想到了一种比我想出的方法更聪明的方法来减少所需的锁定,但谷歌并没有
所以我已经尝试了所有方法,但我似乎仍然无法将下拉内容与 dropbtn 对齐。我只希望内容始终位于更多菜单下方。 HTML: `
我正在尝试使用 expect 来自动接受在 --more-- 中提示的 EULA。 #!/usr/bin/expect spawn "./greenplum-perfmon-web-4.1.2.0-b
他们如何在下面提供的网站上制作“告诉我更多”效果。我读过 read more/less effect in jQuery,但我发现该站点的有趣之处在于,除非单击该按钮,否则无法滚动页面。 Effect
现在,Kim Stebel helped me understanding如何使用存在类型键入变量,我需要知道如何在继承中使用它们: 以下代码无法编译: class PagingListModel(s
在我的Cygwin中不可用。另一方面,提供了“ less”命令。也许Cygwin的制造商认为“更多”只是多余的。 我对此很好奇。 最佳答案 安装util-linux软件包,您将获得“更多”的信息 ht
基本上,我想知道是否有人有增加 DTU 与分片的经验。 DTU应该线性地提高性能。因此,如果您有 5 个 DTU,而您改为 10 个 DTU,那么(理论上)您应该获得大约两倍的性能。 因此,四个 SQ
我们使用 asp.net mvc、javascript 和 jQuery(托管在本地计算机上)创建了一个应用程序。基本设计是,当用户从一个页面导航到其他页面时,我们通过隐藏和显示 HTML 页面,将所
我想用 RMonad 做一些基本的事情。有没有办法使用“as monad”功能来 有一个身份 rmonad,可以应用 monad 转换器吗? 有诸如 StateT 变压器之类的常见东西吗? 向现有 m
我有一个 char*[] 数组。我需要能够为其分配字符串并再次删除它们,但我不知道: 如何检查一个元素中是否已经有一个字符串,这样我就不会覆盖它,如果它已经被占用,则继续处理下一个元素? 之后如何将其
基本上,我想知道是否有人有增加 DTU 与分片的经验。 DTU应该线性地提高性能。因此,如果您有 5 个 DTU,而您改为 10 个 DTU,那么(理论上)您应该获得大约两倍的性能。 因此,四个 SQ
我有一个程序可以同时吐出标准错误和标准输出,我想在标准错误上少运行寻呼机,但忽略标准输出。我该怎么做? 更新: 就是这样......我不想丢失标准输出......只是让它远离寻呼机 program 2
基本上,当单击具有类 "dropdown" 的链接时,我无法获取“更多...”链接来对下一个跨度的高度进行动画处理。它根本就没有动画。仅当更改为 Less... 链接并且单击 Less... 链接以折
我正在使用 ExtJS,并认为它是一个了不起的框架。但是,它们没有内置的状态图,这使得依赖于状态的应用程序开发非常痛苦。 我最近发现了这个: https://github.com/jakesgordo
我一直在研究数据结构和算法,遗憾的是在C中。我已经单独实现了一个双向链表,它保存整数并且工作正常,但是当节点(或pub)让它正常工作时我遇到了很多麻烦在本例中)保存多个不同类型的值。我可以创建一个列表
编辑拼写错误 你好, 这可能是一个愚蠢的问题,但如果它能帮助我遵循最佳实践,我不在乎:P 假设我想在 System.Data 命名空间...以及 System.Data.SqlClient 命名空间中
使用 bootstrap 3 CSS、font awesome CSS 和最新的 jQuery JS 文件。 我正在使用 javascript 在单击按钮时在另一个内容 div 之上隐藏/显示一个内容
我是一名优秀的程序员,十分优秀!