我无法实现此效果:https://www.beoplay.com/products/beoplayh9#usp
我希望能够以这种方式展开和关闭 div。我尽可能地在悬停时展开它们，但它们不会保持展开状态。这是演示:
https://jsbin.com/dihayufegi/edit?css,js,output
$(document).ready(function(){
$("div").click(function(){
$(".frame").animate({width: "+=500px"});
});
});* {margin:0;padding:0;border:0 none;}
*,*:before,*:after {box-sizing:border-box;}
html {color: rgba(255,255,255,.75);}
section {
display: flex;
background-image: linear-gradient(to bottom, cadetblue,silver);
width: 100%;
height: 100vh;
overflow: hidden;
}
div {
flex: 1;
transition: 1s ease-in-out;
border: 1px solid rgba(160,160,255, .5);
}
div:hover {
flex: 25;
}
div:first-child {
background: rgba(0,0,0,.4);
}
div:nth-child(2) {
background: rgba(0,0,0,.2);
}
div:nth-child(3) {
background: rgba(0,0,0,0);
}
div:nth-child(4) {
background: rgba(255,255,255,.2);
}
div:nth-child(5) {
background: rgba(255,255,255,.4);
}
/* @media (max-width:500px) {
section {flex-direction: column;}
} */<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section class="slider">
<div class="frame" id="first">
</div>
<div class="frame">
</div>
<div class="frame">
</div>
<div class="frame">
</div>
<div class="frame">
</div>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</html>我不确定我是否对此采取了正确的方法。请帮忙!
最佳答案
我要添加一个名为 active 的类并通过 jQuery 添加它，而不是使用 hover:
$(document).ready(function(){
$("div").click(function(){
$(this)
.addClass("expand",500)
.siblings()
.removeClass("expand",500);
});
});* {margin:0;padding:0;border:0 none;}
*,*:before,*:after {box-sizing:border-box;}
html {color: rgba(255,255,255,.75);}
section {
display: flex;
background-image: linear-gradient(to bottom, cadetblue,silver);
width: 100%;
height: 100vh;
overflow: hidden;
}
div {
flex: 1;
transition: 1s ease-in-out;
border: 1px solid rgba(160,160,255, .5);
}
.expand {
flex: 25;
}
div:first-child {
background: rgba(0,0,0,.4);
}
div:nth-child(2) {
background: rgba(0,0,0,.2);
}
div:nth-child(3) {
background: rgba(0,0,0,0);
}
div:nth-child(4) {
background: rgba(255,255,255,.2);
}
div:nth-child(5) {
background: rgba(255,255,255,.4);
}
/* @media (max-width:500px) {
section {flex-direction: column;}
} */<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section class="slider">
<div class="frame" id="first">
</div>
<div class="frame">
</div>
<div class="frame">
</div>
<div class="frame">
</div>
<div class="frame">
</div>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</html>关于javascript - 使用 jquery 和 css 在点击时展开 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43310354/