Javascript Onclick show div重叠/隐藏其他
我试图实现3个可点击的Javascript Onclick show div重叠/隐藏其他,javascript,html,jquery,css,frontend,Javascript,Html,Jquery,Css,Frontend,我试图实现3个可点击的，在点击时展开和隐藏/重叠其他内容，同时显示每个点击的中的内容。我现在只有JQuery 我最初的问题是，我应该用什么？（Flexbox？CSS动画？反应？） 在普通的html+css+js堆栈中，是否可能没有一个很好的转换？ 我制作了一张图片来说明我想说的： 只需使用纯Javascript，您所需要做的就是向每个div添加一个click事件，当单击一个div时，您就可以发出yourDivName.setAttribute（“样式”，“显示：块”）并发出yourDivName
只需使用纯Javascript，您所需要做的就是向每个div添加一个click事件，当单击一个div时，您就可以发出
yourDivName.setAttribute（“样式”，“显示：块”）yourDivName.setAttribute（“样式”，“显示：无”）到其他两个。然后对每个人重复这个过程。显然，将每个函数都包含在一个函数yourFunctionName（）中{
//在这里输入逻辑
}
您的过程应该是首先获取每个div并将其放入一个变量中，然后根据您希望对div执行的操作来执行上述代码。我希望这有助于让我知道您是否希望我为您执行Javascript:）首先，在询问问题时，您应该在问题中编写脚本。因为我们必须看看你有什么代码
关于你的问题，有很多选择。如果要使用jQuery：
HTML:
如果您想使用CSS，可以执行以下操作：
HTML:
如果你想制作一些动画，你可以使用我在回答我自己的问题，向你展示我取得的进步。
根据你的两个建议，这一点已经开始得到重视
（最后是Jsfiddle）
HTML
Js+Jquery
我选择了flexbox的解决方案。这并不完全是我想要的，但它确实做到了。
现在我遇到的问题如下
如何将首先隐藏的内容放在我的图像旁边而不是下面
当一个div打开时，如何关闭其他div？
再次单击
后如何隐藏内容？（如果我理解正确，这是一种“如果/然后/否则”的情况）
我认为最后两个问题是经常被问到的，所以我将开始自己搜索，只是展示我的进展
再次感谢您抽出时间，我希望我在格式化方面做得更好
这是一个jsfiddle。
Ps：我也在学习响应能力。谢谢！这将有助于我的研究！我害怕走错方向。我会先尝试自己排序，然后发布代码！谢谢你的时间和回答，现在就开始工作，稍后我会发布代码！对不起，我没有代码，因为我真的不知道从哪里开始！
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
$('.group').on('click', function(){
$('.group').hide();
$(this).show();
});
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
.group{
display: none;
}
.group:active{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackCode</title>
<link rel="stylesheet" href="dummy.css" />
</head>
<body>
<header>
</header>
<section class="section">
<div class="service-box">
<div class="service-story">
<div> <h1> Title </h1> </div>
<img class="img-left" src="https://via.placeholder.com/250x700">
<div class="service-story-expand">
<h1>TITLE</h1>
<p>Sample text</p>
<img src="https://via.placeholder.com/100">
</div>
</div>
<div class="service-art">
<div> <h2> Title2 </h2></div>
<img class="img-middle" src="https://via.placeholder.com/250x700">
<div class="service-art-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
<div class="service-motion">
<div> <h2> Title3 </h2></div>
<img class="img-right" src="https://via.placeholder.com/250x700">
<div class="service-motion-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
</div>
</section>
<script src="jquery-3.4.1.min.js"></script>
<script src="dummy.js"></script>
</body>
</html>
*
{
margin:0px;
padding:0px;
}
html {
overflow-x :hidden;
background: black;
}
header
{
height:20px;
overflow: hidden;
background-color: black;
padding: 45 0 0 0;
z-index: 0;
width: 100%;
}
.section{
width: 100%;
background:grey;
margin: auto;
}
.service-box{
overflow: hidden;
width: 90%;
height: auto;
margin:auto;
display: flex;
justify-content: space-evenly;
}
.service-story{
height: auto;
overflow: hidden;
flex:1;
order: 1;
transition: flex .3s ease-out;
}
.service-story.clicked{
background:white;
height: auto;
flex:6;
transition: flex .3s ease-out;
}
.service-story-expand{
display: none;
}
.service-art{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 2;
}
.service-art.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-art-expand{
display: none;
}
.service-motion{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 3;
}
.service-motion.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-motion.clicked img{
float: left;
}
.service-motion-expand{
display: none;
}
.service-story.clicked img{
width:auto;
height:auto;
}
$('.service-story').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-art').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-motion').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-motion-expand').show();
});